如何将指令名称传递给模板-Angular.js

Question

I have a directive that creates a bunch of similar widgets. Each widget houses and different directive. Here is the template that I use to create my widget:

template: '<li><div {{widgetModel.directiveName}}></div></li>'

I am wanting the variables to be reconciled and or the template to declare the directive that needs to be used. The template will then be:

template: '<li><div directive-name></div></li>'

I then want it to act as a normal directive with an attribute name of directiveName . This is not happening with the current code and I do not know how to make it behave like I need. The directiveName directive can really be anything.

Answer 1

You could do those changes at compile function:

angular.module('myWidgets', [])
  .directive('multiDirective', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs)
        {
            var htmlText = '<ul>' +
                    '<li ' + attrs.directiveName + '>' + '</li>' +
                '</ul>';
            element.replaceWith(htmlText);
        }
    }
})

And then you could call it like this:

<multi-directive directive-name='widget1' />

Answer 2

I made a CodePen example based on the hints in the Angular Dynamic Templates blog post that I saw referenced in another post.

In order to have HTML that looks like the following:

<div ng-controller="ExampleCtrl">
  <div ng-repeat="dir in dirs">
    <div smart />
  </div>
</div>

and assuming that your controller looks something like this:

function ExampleCtrl($scope) {
   $scope.dirs = ["<div dir-a />","<div dir-b />"];
}

The smart directive could look like this:

.directive('smart', function($compile) {
   return {
      restrict: 'AE',
      link: function (scope, element) {
         element.html(scope.dir);
         $compile(element.contents())(scope);
      }
   };
});