被指令包裹，我如何访问它的范围？答案

【问题标题】：Being wrapped by a directive, how can I access its scope?被指令包裹，我如何访问它的范围？
【发布时间】：2014-06-03 12:34:16
【问题描述】：

如何在指令正文中访问指令的隔离范围？我的 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.

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

您的代码中有几个问题。

属性的默认限制选项是A，因此无论如何您的指令都不会被编译，因为您将其用作元素。使用restrict: 'E' 使其工作。
根据文档，嵌入元素的范围不是指令的子范围，而是同级范围。所以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;
        }
    };
});

但是，这种方法是不可取的，如果你在指令之前添加一个新的控制器，因为与以前的第一个不同，transcluded scope 变成了第二个兄弟，所以这种方法是不可取的。

<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 的答案是您应该选择的答案。我只是想解释一下为什么它不适合你。

【讨论】：

【解决方案2】：

你忘记了两件事：

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

查看更新的小提琴http://jsfiddle.net/Y9g4q/1/。

祝你好运。

【讨论】：

如果我创建一个子范围，我如何“转移”像scope { myAction: "&" }这样的东西？
可以直接从属性jsfiddle.net/Y9g4q/3链接函数中获取
my-action="action()" 这样的东西怎么样？如何调用指定的函数（显然是在父范围中定义的）？还是我在做一些太复杂的事情？ :D
我不确定我是否正确，您可以在范围的上下文中评估属性，请参阅另一个小提琴jsfiddle.net/Y9g4q/5

【解决方案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>

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。

【讨论】：