当多个指令共享同一个元素时，对 AngularJS 范围感到困惑

Question

全部：

我是 AngularJS 指令作用域的新手，我想知道当多个独立作用域指令分配给同一个元素时 AngularJS 如何处理作用域。

例如：

app.controller("main", function($scope){
    $scope.data = [
        {
            id:"id_1"
        },
        {
            id:"id_2"
        },
        {
            id:"id_3"
        },
        {
            id:"id_4"
        }
    ];
});

app.directive("isodir", function(){
    return {
        restrict:"AE",
        scope: {},
        controller: function($scope){$scope.d = {id:"isodir_id"} },
        link: function(scope, EL, attrs){}
    }
});

HTML部分是：

<isodir ng-repeat="d in data track by $index">{{d.id}}</isodir>

<isodir>{{d.id}}</isodir>

让我很困惑的主要有两个问题：

[1] 对于 html 部分[1]：带有 ng-repeat 的那个，谁能给我 关于如何 AngularJS 决定使用谁的范围的一些解释，因为 ng-repeat 和 isodir 都是孤立的范围（根据结果， 但事实证明，ng-repeat 范围被应用了，我想知道为什么 未应用 isodir）；有时，如果我使用两个指令都带有隔离 作用域，AngularJS 会报错。 但是 ng-repeat 不报告 错误。

[2] 对于 html 部分[2]：没有 ng-repeat 的部分，让我们说我 毫无疑问地接受关于 part[1] 的事实，那么这意味着 ng-repeat 范围内的 d 被渲染到 {{d.id}}，但在部分 [2]， 我在 isodir 控制器中定义了 $scope.d，但是 为什么 这个 d 可以不 用作 {{d.id}}

的值

谢谢

Answer 1

1) 这将与 $compile 顺序有关，其中优先级较高的指令将首先执行。 ngRepeat 的优先级为 1000，高于自定义指令的 0。 但是对于您的情况，这是由于您使用的 ng-bind-html {{d.id}} 不适用于自定义指令，因为您有一个隔离范围，因此它期望 {{d.id}} 将被绑定在内部指令模板而不是它之外。即使用模板或模板Url。

检查 1st plunkr，它是你的指令的固定版本

app.directive('isodir', function(){
return {
    restrict:"AE",
    priority: 0,
    template: "{{d.id}}",
    scope: {},
    controller: function($scope){$scope.d = {id:"isodir_id"} }
}
});

http://plnkr.co/edit/3noKzbJGMav7MBozW4i0?p=preview

如您所见，结果是 isodir，因为它是最新编译的，因此会覆盖 ng-repeat d 范围。

将其与 2nd plunkr 进行比较，哪个自定义指令具有比 ngRepeat 更高的优先级

app.directive('isodir', function(){
return {
    restrict:"AE",
    priority: 100000,
    template: "{{d.id}}",
    scope: {},
    controller: function($scope){$scope.d = {id:"isodir_id"} }
}
});

http://plnkr.co/edit/1RhF0LpvfBOaVPZju6Fr?p=preview

如您所见，ng-repeat 覆盖 {{d.id}} 以使用 ngRepeat 范围对象。

2) 如上所述，这是由于孤立的范围。如果您想在没有模板/模板 URL 的自定义指令中使用 {{d.id}}，那么您必须删除隔离范围。