angularjs - 被指令包装后，我如何访问它的范围？

Question

如何在指令主体中访问指令的隔离范围？我的 DOM 看起来像这样:

<div ng-app="app">    
    <directive>
        <p>boolProperty: {{boolProperty|json}}</p>
    </directive>
</div>

boolProperty被分配在指令的 link 内功能:

angular.module("app", []).directive("directive", function() {
    return {
        scope: {},
        link: function($scope) {
            $scope.boolProperty = true;
        }
    };
});

问题是， child <p>指令内部绑定(bind)到指令的父范围，而不是指令的独立范围。我该如何克服这个问题？

Click here for jsFiddle.

Answer 1

您的代码中存在一些问题。

1. 属性的默认限制选项是 A，因此无论如何您的指令都不会被编译，因为您将其用作元素。使用 restrict: 'E' 使其正常工作。

2. 根据文档，嵌入元素的范围不是指令的子范围，而是同级范围。因此boolProperty将始终是未定义或空的。因此，您必须提升范围级别并找到合适的同级。

   <div ng-app="app">
      <directive>
       <p>boolProperty: {{$parent.$$childHead.boolProperty}}</p>
       </directive>
   </div>
   

并且需要在指令中使用嵌入:

angular.module("app", []).directive("directive", function() {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        template: '<div ng-transclude></div>',
        link: function(scope) {
            scope.boolProperty = true;
        }
    };
});

但是，这种方法并不可取，如果您在指令之前添加一个新 Controller ，则会在稍后中断，因为嵌入的范围将成为第二个同级，而不像以前那样是第一个。

<div ng-app="app">
    <div ng-controller="OneCtrl"></div>
    <directive>
        <p>boolProperty: {{$parent.$$childHead.boolProperty || $parent.$$childHead.$$nextSibling.boolProperty}}</p>
    </directive>
</div>

这是 Working Demo 。我提到的方法并不理想，因此使用风险自负。 @CodeHater 的答案是您应该遵循的答案。我只是想解释为什么它对你不起作用。