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?

Possible duplicate of Dynamically add directive in AngularJS — Kstro21
– Kstro21, Commented Jul 29, 2016 at 20:38

joakimbl · Accepted Answer · 2013-05-20 19:45:47Z

48

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

answered May 20, 2013 at 19:45

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Hengjie Over a year ago

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

trusktr Over a year ago

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 Over a year ago

@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 Over a year ago

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

Hengjie Over a year ago

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.

|

Collectives™ on Stack Overflow

Insert directive programmatically AngularJS

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related