Insert directive programmatically AngularJS

Question

So I basically want to be able to trigger an event and then have a directive compile and insert its self to a position in the DOM. Currently I have something like this

//controller
  angular.module('app').controller('MainCtrl', function ($scope, $compile) {

    $scope.$on('insertItem',function(ev,attrs){
      var el = $compile( "<chart></chart>" )( $scope );
      $scope.insertHere = el;
    });

  });


// directive
 angular.module('app')
  .directive('chart', function () {
    return {
      template: '<div>My chart</div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        element.text('this is a chart');
      }
    };
  });

I am able to see the object "el" with all that I need but I'm not able to insert it into the DOM... any clues?

Solution

You have to create the dom element first, then compile it and add it to the document. Something like this:

$scope.$on('insertItem',function(ev,attrs){
  var chart = angular.element(document.createElement('chart'));
  var el = $compile( chart )( $scope );

  //where do you want to place the new element?
  angular.element(document.body).append(chart);

  $scope.insertHere = el;
};

I've created a simple example here: http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview

Comments

[Hengjie]

How would I access $compile if I were creating the element outside of Angular?

[trusktr]

Hi, would you please provide ideas on my new proposed API to make programmatically adding directives a simpler process? github.com/angular/angular.js/issues/6950 Thanks!

[Kevin Beal]

@Hengjie It needs to compile the element with reference to a particular scope (inside angular). There are no directives outside of angular. Directives are tied to scopes within your app. Alternately you can use the jQLite inside angular and do event handlers that way (angular.element('body')).

[FlavorScape]

is this a normal practice, or considered against the angular grain?

[Hengjie]

It definitely feels it's against the Angular ways, though the alternative isn't any more prettier. I basically lazily triggered ng-include depending on an event and let ng-include handle the compilation and linking for me. If anyone is interested, I can dig up the code and add it as an answer.

[schlingel]

hengije please do so. That would be very helpful.

[The Red Pea]

It is not necessary to determine the dependencies of the directive you're creating, nor inject them. Example here introduces a dependency on a factory 'f', but I continue to use @joakimbl's code which simply compiles like this ` $compile( chart )( $scope );`

[Vojtech Ruzicka]

It would be nice to update the answer with case the directive has any attributes, which need to be provided.

[Bryant James]

Does anyone have an example of $scope.insertHere? I try referencing a variable like that and just get something along the lines of {context:"0"}. I dont have the exact code in front of me.