如何访问嵌套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

可以使用作用域。

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