Question

我在访问Angular中的内部指令范围时遇到了问题。

我创建了两个指令，一个内部指令和一个外部指令。我希望他们两个都有孤立的范围。我希望内部指令是表单标记的一个属性，我希望在提交表单时调用内部指令范围的函数。

不幸的是，我似乎无法让它发挥作用。

为什么我不能访问内部指令的doThing函数？另外，如果我将innerDirective更改为scope：false，则无法访问outer指令的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中使用范围。$ parent，如下所示。

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

如何访问嵌套的Angular指令的范围属性

1 个答案: