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

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> 指令内部绑定到指令的 家长 范围，而不是指令的独立范围。我怎样才能克服这个问题？

单击此处获取 jsFiddle。

Answer 1

你忘记了两件事：

1. 默认情况下，AngularJS 使用属性限制，因此在指令定义中，您应该指定 restrict: "E"
2. 您应该使用子作用域，但不要隔离。这样设置 scope: true 从父视图范围继承。

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

祝你好运。

Answer 2

您的代码中有几个问题。

1. 默认限制选项是 A for 属性，所以无论如何你的指令都不会被编译，因为你将它用作元素。使用 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;
        }
    };
});

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

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

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

Answer 3

来自 文档:

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

这里更新了 小提琴.