AngularJS : Interpolating attributes

Question

Say I have the following two directives:

angular.module('foo').directive('outer', [function(){
  return {
    restrict: 'E',
    scope: {
      inner: '@',
      innneParams: '@'
    },
    template: "<div {{inner}}{{innerParams}}></div>",
    link: function(scope, elem, attrs){
      console.debug("I AM IN YOUR OUTER DIRECTIVE PASSING YOUR D00DZ!")
    }
  }

}]);
angular.module('foo').directive('innerDir', [function(){
  return {
    restrict: 'EA',
    scope: {
      innerParam: '='
    },
    template: "<div>{{massagedInner}}</div>",
    link: function(scope, elem, attrs){
      console.debug('I AM IN YOUR INNER DIRECTIVE MASSAGING YOUR D00DS!')
      scope.massagedInner = scope.innerParam + "FROM YOUR DOGE!"
    }
  }
}]);

And the following HTML:

<outer inner="inner-dir" my-awesome-scope-value="myAwesomeScopeValue" inner-params="inner-param='myAwesomeScopeValue'"></outer>

The outer directive console debug triggers, the inner one does not. Is there a good way for me to achieve this kind of behaviour?

Plunk: http://plnkr.co/edit/jXbtWvYvtFXCTWiIZUDW?p=preview

You're trying to use a directive as attribute (the inner one) but you restricted it to E (element only). You need to restrict the inner directive to attribute also: EA, let's say. You're also having an ending single quote typo here: my-awesome-scope-value="myAwesomeScopeValue'. — Nicolae Olariu
– Nicolae Olariu, Commented May 13, 2014 at 8:15
Those were both problems, however the inner-param still doesn't bind.... updated plunk/question to address your points — Abraham P
– Abraham P, Commented May 13, 2014 at 8:27
I don't think you can define a template twice on the same element. You have the outer and inner both competing to do so. You're also requesting isolate scope twice. The inner one looks it should be an element directive but I'm not clear what your objective is. — cirrus
– cirrus, Commented May 13, 2014 at 8:31
Apart from being full of typo bugs (sometimes the param name is inneParams sometimes it is innerParam sometimes it is innerParams) I think you are hitting on the problem of sibling scopes; that is, the inner and outer are actually side-by-side in scope hierarchy instead of nested as assumed here....I'd verify that. — SonOfNun
– SonOfNun, Commented May 13, 2014 at 8:39

Idkt · Accepted Answer · 2014-05-13 09:16:42Z

1

There are quite a few things you're doing wrong. I've made the changes that I thought are close to what you wanted it to do and you can change the code from here.

Here's a working version

And this is what script.js now looks like;

angular.module('foo', []);
angular.module('foo').controller('fooController', ['$scope', function(scope){
  scope.myAwesomeScopeValue = 'O HAI THERE'  
}]);
angular.module('foo').directive('outer', [function(){
  return {
    restrict: 'E',
    scope: {
      // inner: '@',
      // innnerParams: '@'
      innerParam: '@'
    },
    template: "<div inner {{inner}} {{inner-param}}></div>",
    link: function (scope) {
      console.log('OUTER', scope.innerParam);
    }
  }

}]);
angular.module('foo').directive('inner', [function(){
  return {
    restrict: 'A',
    // scope: {
    //   innerParam: '='
    // },
    replace: false,
    template: "<div>{{massagedInner}}</div>",
    link: function(scope, elem, attrs){
      scope.massagedInner = scope.innerParam + "FROM YOUR DOGE!"
      console.log('INNER');
    }
  }
}]);

For brevity, I've left some of your lines commented out. I hope this helps.

answered May 13, 2014 at 9:16

Idkt

3,0034 gold badges29 silver badges48 bronze badges

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

2 Comments

Abraham P Over a year ago

This doesn't really do what I want since the inner directive is applied unconditionally, not passed through from the parent scope

Idkt Over a year ago

AFAIK, there's no way to conditionally apply directives, yet. The condition for that must live above the directives; ngIf may help, but ofcourse, it has to be on the directives rather than in them. The idea here was to show that you don't need to isolate scopes on all directives – especially when you have two or more directives working on the same element. Its quite possible for a child directive to use the parent scope – in this case the inner directive uses outer's scope, which can in turn use the parent scope if replace: false. docs.angularjs.org/api/ng/directive/ngIf

Collectives™ on Stack Overflow

AngularJS : Interpolating attributes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related