Dynamically Create and Load Angular Directive

Question

In my application i have a list of custom directive names.

$scope.data =["app-hello","app-goodby","app-goodafter"];

each name in this array is one directive that im created.

var app = angular.module('app',[]).controller('mainCtrl',function($scope){
 $scope.data =["app-hello","app-goodby","app-goodafter"];
}).directive('appHello',function(){
 return {
  restrict:'EA',
  template:'<h1>Hello Directive</h1>'
};
}).directive('appGoodbye',function(){
return {
 restrict:'EA',
template:'<h1>GoodBye</h1>'
 };
}).directive('appGoodafter',function(){
  return{
restrict:'EA',
template:'<h1>Good Afternoon</h1>'
};
});

now i want to load directive with ng-repeat in the view for example because i used EA restrict for directive can create directive in ng-repeat like this :

<div ng-repeat="d in data" >
  <div {{d}}></div>
</div>

but this way it doesn't work. so the real question is if i have list of directive how to load this directive with ng-repeat.for this scenario i create a jsbin . thanks.

You will need to $compile the html to get angular to pickup the directive — Jon
– Jon, Commented Jun 28, 2014 at 9:59

gkalpak · Accepted Answer · 2014-06-28 11:16:24Z

2

You need a "master" directive that $compiles the HTML (optionally containing directives) into an Angular-aware template and then links the compiled element to a $scope:

app.directive('master', function ($compile) {
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            attrs.$observe('directive', function (dirName) {
                if (dirName) {
                    var compiledAndLinkedElem =
                            $compile('<div ' + dirName + '></div>')(scope);
                    elem.html('').append(compiledAndLinkedElem);
                }
            });
        }
    };
});

<div master directive="{{dir}}" ng-repeat="dir in ['dir1', 'dir2', 'dir3']"></div>

See, also, this short demo.

answered Jun 28, 2014 at 11:16

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

5 Comments

MBehtemam Over a year ago

What is the benefit of your way @akn way.i want to load some charts and i don't know which of this is best for me.

gkalpak Over a year ago

Actually, they are pretty close (we are essentially doing the same thing in a different order). The only benefit of my approach is that it can dynamically change to a different directive (e.g. in the fiddle enter dir1 into the text-field to show the 1st directive, the enter dir3 to show the 3rd (it detects the new value and compiles the appropriate directive "on-the-fly")). @akn's approach is more static. But, of course, if you don't need to support dynamic changes, then both will work the same.

MBehtemam Over a year ago

in you code when you write $compile('<div ' + dirName +'></div>') how can i pass some scope for example some data to directive .

akn Over a year ago

If you want to pass some extra values you just have to add additional attributes to the compiled element. jsfiddle.net/9uf3E/2

gkalpak Over a year ago

@MBehtemam: Also, keep in mind that if the directive does not have an isolate scope, it will share the properties of the scope it is linked to (i.e. master's scope).

akn · Accepted Answer · 2014-06-28 11:17:44Z

1

You can do it in this way:

Directive:

app.directive('compile',function($compile){
  return{
    restrict:'A',
    template: '<div></div>',
    link:function(scope,elem,attrs){
      scope.name = attrs.compile;
      elem.children('div').attr(scope.name,'');
      $compile(elem.contents())(scope);
    }
  };
});

HTML:

  <div ng-repeat="d in data" compile="{{d}}">
  </div>

Jsbin: http://jsbin.com/wofituye/4/edit

edited Jun 28, 2014 at 11:17

answered Jun 28, 2014 at 11:12

akn

3,7221 gold badge29 silver badges45 bronze badges

Comments

SamMorrowDrums · Accepted Answer · 2014-12-01 15:04:49Z

I actually prefer to create templates, that just contain the directive. Then you can use ng-include this then enables you to easily pass scope variables into the dynamically chosen directives too.

Here is my widget code fore example:

<div ng-repeat="widget in widgets track by $index" ng-include="widget.url" class="widget-container" ng-class="widget.widget_type.config.height +' ' + widget.widget_type.config.width">
</div>

Then I set the widget.url to a template containing just the right directive.

I can then in my directive do this:

<custom-widget ng-attr-widget="widget"></custom-widget>

Then I have access to the dynamic variable too, so I can access configuration specifics too, without having to dynamically generate HTML strings and compile them. Not a perfect solution, but personally I used to use the other approach mentioned, and discovered that this fit my needs much better.

Collectives™ on Stack Overflow

Dynamically Create and Load Angular Directive

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related