How to pass directive name to template - 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.

one line of code doesn't explain problem. What gets output from template now? What are you expecting for output? directives can be identified in markup 3 different ways — charlietfl
– charlietfl, Commented Nov 5, 2013 at 3:16
Are you using directive's name dash-delimited instead of camelCase? — dimirc
– dimirc, Commented Nov 5, 2013 at 4:01

Tatiana Racheva · Accepted Answer · 2013-11-05 05:20:58Z

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' />

edited Nov 5, 2013 at 5:20

Tatiana Racheva

1,3132 gold badges14 silver badges33 bronze badges

answered Nov 5, 2013 at 4:45

dimirc

6,7853 gold badges26 silver badges34 bronze badges

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

Comments

Tatiana Racheva · Accepted Answer · 2013-11-05 05:05:06Z

0

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);
      }
   };
});

answered Nov 5, 2013 at 5:05

Tatiana Racheva

1,3132 gold badges14 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to pass directive name to template - Angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related