javascript之AngularJS : Interpolating attributes

假设我有以下两个指令:

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!" 
    } 
  } 
}]); 

以及以下 HTML:

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

外部指令控制台调试会触发，内部指令则不会。有什么好方法可以让我实现这种行为吗？

普朗克:http://plnkr.co/edit/jXbtWvYvtFXCTWiIZUDW?p=preview

请您参考如下方法:

你做错了很多事情。我已经进行了我认为接近您想要的更改，您可以从此处更改代码。

Here's a working version

这就是 script.js 现在的样子；

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

为了简洁起见，我将您的一些行注释掉了。我希望这会有所帮助。