CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-compile
Abraham P
Abraham P

Reputation: 15471

AngularJS : Interpolating attributes

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

Upvotes: 1

Views: 102

Answers (1)

Idkt
Idkt

Reputation: 2996

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.

Upvotes: 1

Related Questions