Stacking Directives in angularJS

Question

I'm wondering how/if it is possible to extend or stack AngularJS directive behavior. What i want to achieve is to define a custom directive as an attribute in a div and be able to cumulatively add elements to the div from multiple calls.

This seems like a similar question to this one: Extending Angular Directive

..which refers to this documentation: https://github.com/angular/angular.js/wiki/Understanding-Directives

the documentation refers to the concept of stacking directives.. but does not have a lot of detail. Below is basically what i am trying but when i add the second directive call it gives an error. Wondering if there is any way to achieve this sort of thing. The motivation is that the main application would have some base content but someone else could come along and extend it without modifying the original code. Is there a better way to achieve this?

error:

Error: Multiple directives [myDirective, myDirective] asking for template on: <div my-directive="">

code:

<div my-directive></div>

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        template : '<div>custom directive 1</div>',
        replace : false
    };
});

.... 

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        template : '<div>custom directive 2</div>',
        replace : false
    };
});

I'm not sure what you're asking. An html element only has one value for a named attribute. I can't understand why you don't just include both elements in one template and one directive... — Jason Goemaat, Oct 24 '13 at 04:48
The scenario im trying to achieve is basically to make the application extensible without having to modify the core application. e.g. 'my-directive' is predefined in the base application as an attribute on one of the html elements. developer #1 can come along and add their own custom elements/templates using a directive with the name 'my-directive'. developer #2 can come along at another point in time and want to add another extension without modifying the base application or the directive added by developer #1. Maybe this is not possible though — ccaffrey, Oct 24 '13 at 15:54
I think I understand what you are trying to do, you basically want a site that will produce HTML with directives, and you want to enable javascript plugins that will act on those elements as directives. I don't think that is possible directly. You could set up your own way to register link() functions for instance and call them from the directive... — Jason Goemaat, Oct 24 '13 at 19:06
Yes your description is correct. I'm not able to achieve it using a directive template.. but was able to achieve something along the right lines by appending content in the directive's compile function. I'll post some sample code to illustrate what i've been able to do — ccaffrey, Oct 25 '13 at 16:14

score 0 · Answer 1 · answered Oct 23 '13 at 22:26

You can't have two directives with the same name and a different template. What you want is one directive with multiple instances on the page. Since you want data in the template to be different, you need to isolate the scope of each instance...

<div my-directive isolatedProperty="1"></div>
<div my-directive isolatedProperty="2"></div>

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        template : '<div>custom directive {{isolatedProperty}}</div>',
        replace : false,
        scope: {
          isolatedProperty: '='
        }
    };
});

Adding the scope property to the directive tells angular that each instance of this directive should have its own scope. The '=' says to pull this value from the HTML attribute with the same name in the directive declaration on the page. You should also look into using '@' and '&' as well.

Stacking Directives in angularJS

1 Answers1