如何访问嵌套的Angular指令的作用域属性

Question

我在访问Angular的内部指令的作用域时遇到问题。

我已经创建了两个指令，一个内部指令和一个外部指令。我希望他们都有隔离范围。我希望内部指令是表单标签上的一个属性，并且我希望在提交表单时调用内部指令作用域的函数。

不幸的是，我似乎无法得到它的工作。

为什么我不能访问内部指令的doThing函数？另外，如果我将innerDirective更改为scope：false，我无法访问外部指令的doSomething函数。我不确定我在这里错过了什么。

http://codepen.io/justinbc820/pen/vNBWMp

angular.module('app', []) 
.directive('outerDirective', function() { 
    return { 
     restrict: 'E', 
     scope: {}, 
     link: function(scope) { 
      scope.doThing = function() { 
       alert('outer directive'); 
      } 
     } 
    }; 
}) 
.directive('innerDirective', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     link: function(scope, element) { 
      scope.doThing = function() { 
       alert('inner directive'); 
      } 
     } 
    }; 
}); 


<div ng-app="app"> 
    <outer-directive> 

    <form inner-directive ng-submit="doThing()"> 
     <button type="submit">Do THING</button> 
    </form> 

    </outer-directive> 
</div> 

Answer 1

可以在innerDirective使用范围。$父如下。

.directive('innerDirective', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     link: function(scope, element) { 
     scope.$parent.doThing = function() { 
      alert('inner directive');   
     } 
     } 
};