AngularJS: Using an attribute set in one directive, within another directive

Question

Scenario

Lets say I have two directives first and second where the directives are used on the same DOM element as such:

HTML

<div first second></div>

Javascript

//first directive
.directive('first', function(){
return {
    restrict: 'A',
    priority: 1,
    link: function(scope, element, attrs){
        element.attr('someAttr', 1234);
        element.html('I have the attribute value: ' + element.attr('someAttr'));
       }
   };
})
// second directive
.directive('second', function(){
return {
    restrict: 'A',
    priority: 0,
    controller: function($scope, $element, $attrs){
        // the elements attribute `someAttr` is undefined here
    }
   };   
})

The first directive adds an attribute (someAttr) to the element where it is being used.

Problem

What I want to achieve is that access/use the set value to someAttr (set in first directive) in the second directive's link/controller function. But for the moment, I haven't been successful in doing so. (Check this fiddle out)

Note: I've also set the priority of the first directive to a value higher than that of second, but still when you log the attributes of the element where the directive is used, there is no someAttr attribute in the set.

Also note that if how I want to achieve the communication between directives is not appropriate, then what is the right way to do so? Any help would be appreciated.

what is the practical problem you are trying to solve here? there are much better ways to enable directives to communicate with each other.... — Claies
– Claies, Commented Nov 10, 2015 at 9:02
The real reason I want to access the attribute between those directives is that, in fact, the first directive (in my own case uid directive) generates a unique id for the DOM element. Whereas the the second directive (storeJSON directive) is responsible for creating/storing a DOM JS object based on the unique ID set in the first directive, as well as placing this object in the appropriate position, in a hierarchy of DOM JS objects. — Ahmad Baktash Hayeri
– Ahmad Baktash Hayeri, Commented Nov 10, 2015 at 9:09

Alex Pollan · Accepted Answer · 2015-11-10 10:15:25Z

You cannot cannot detect changes in attributes set to the DOM element directly (at least not in angularjs way).

Try using a property in the first directive controller and then 'require' 'first' in 'second' to access 'second' properties.

Check the information about the 'requires' property when defining a directive to see how it works.

UPDATE: Check this plunkr:

http://plnkr.co/edit/bEbO8LvCIUd0NZPFqMnv?p=preview

app.directive('first', function(){
return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.html('I (first) have the scope value: ' + scope.data.attribute);
       },
       controller: function($scope) {
         this.data = $scope.data = {
           attribute: 1234
         };
       }
   };
});
// second directive
app.directive('second', function(){
return {
    restrict: 'A',
    require: 'first',
    priority: 1,
    link: function($scope, element, attrs, firstController){
        element.html(element.html() + ' and I (second) have access to that value too: ' + firstController.data.attribute);
        //you can $scope.$watch firstController.data changes here too
    }
   };   
});

Collectives™ on Stack Overflow

AngularJS: Using an attribute set in one directive, within another directive

Scenario

Problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Scenario

Problem

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related