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

问题是，指令中的子<p>绑定到指令的父范围，而不是指令的隔离范围。我怎么能克服这个？

Click here for jsFiddle.

Answer 1

您的代码中存在几个问题。

对于属性，默认的限制选项是A，因此无论如何都不会编译您的指令，因为您将其用作元素。使用restrict: 'E'使其正常工作。
根据文档，transcluded元素的范围不是指令的子范围，而是兄弟范围。所以boolProperty将始终未定义或为空。所以你必须上升范围级别并找到合适的兄弟。
```
<div ng-app="app">
   <directive>
    <p>boolProperty: {{$parent.$$childHead.boolProperty}}</p>
    </directive>
</div>
```

并且需要在指令中使用transclusion作为：

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

然而，这种方法是不可取的，稍后会破坏如果你在指令之前添加一个新的控制器，因为transcluded范围变成了第二个兄弟，而不像之前的那样。

<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＆＃39;答案就是你应该选择的答案。我只想解释它为什么不适合你。

Answer 2

你忘记了两件事：

默认情况下，AngularJS使用attrubute限制，因此在指令定义的情况下，您应指定restrict: "E"
您应该使用子范围，但不是孤立的。因此，将scope: true设置为从父视图范围继承。

请参阅更新的小提琴http://jsfiddle.net/Y9g4q/1/。

Answer 3

来自docs：

As the name suggests, the isolate scope of the directive isolates everything except models that you've explicitly added to the scope: {} hash object. This is helpful when building reusable components because it prevents a component from changing your model state except for the models that you explicitly pass in.

您似乎需要明确地将boolProperty添加到scope。

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

JS

angular.module("app", []).controller("ctrl",function($scope){
    $scope.boolProperty = false;
}).directive("directive", function() {
    return {
        restrict:"E",
        scope: {boolProperty:'=bool'},
        link: function($scope) {
            $scope.boolProperty = "i'm a boolean property";
        }
    };
});

此处已更新fiddle。

被指令包裹，如何访问其范围？

3 个答案: