angularjs：指令创建两个子范围（不是隔离范围）？以及如何获取元素的范围？

Question

我正在编写我的 angularjs 指令，其定义如下：

return {
    restrict: 'EA',
    link: link,
    scope: true,
    transclude: true,
    replace: true,
    controller: controller,
    template: '<div class="wizard">' +
        '<div ng-transclude></div>' +
        '</div>'
};

我注意到创建了两个范围：

< Scope (003)  --- parent scope of directive
    < Scope (004)  --- controller scope of directive which I think is child scope created by 'scope=true'. all my functions, properites defined in controller show up in this scope
    < Scope (005)  --- transclude scope which is empty

从文档中我预计只创建了一个子范围，因为 'scope=true' 不会创建一个孤立的范围。这导致所有被“ng-transclude”替换的元素实际上继承了 Scope(005) 并且无法访问我在控制器中定义的函数/属性，因为它们位于 Scope(004) 中，它是 Scope(005) 的兄弟。

我不知道出了什么问题，有人可以在这里放灯吗？

当使用 Chrome 调试器查看我的元素时，我注意到这些元素是由“ng-scope”类添加的，但是，如何将“ng-scope”与batarang 控制台中显示的范围匹配？比如显示 ng-scope 的 id。

谢谢

Answer 1

scope: true 将从控制器作用域创建一个新的子作用域 prototypically inherits - 这是作用域 004。

scope: { ... } 将创建一个新的子范围，它在原型上并不从控制器范围继承。

无论哪种方式，都会创建一个新的子作用域。

此外，由于您使用的是transclude: true，因此会创建另一个（转入的）子作用域 005。被嵌入的作用域总是原型继承自控制器作用域。

正如您已经发现的那样，您在指令范围（即指令内部）上定义的属性和函数对视图不可用，因为视图使用了转入的范围。

上图基于以下代码：

app.directive('myDirective', function() {
    return {
        restrict: 'EA',
        //link: link,
        scope: true,
        transclude: true,
        replace: true,
        controller: function($scope) {
            $scope.dirProp1 = "dirProp1";
            $scope.dirFunc = function() {}
        },
        template: '<div class="wizard">' +
            '<div ng-transclude></div>' +
            '</div>'
    };
});

function MyCtrl($scope) {
    $scope.parentCtrlProp1 = 'ParentCtrlProp1';
}

因此，从图中可以看出，被嵌入的范围（因此被嵌入的内容）只能通过原型链访问控制器范围 (003) 上定义的属性和函数。

如何将“ng-scope”与batarang 控制台中显示的范围相匹配？像显示 ng-scope 的 身份证。

我不知道有什么方法可以做到这一点（这就是为什么我编写了一个工具来绘制自己的图片）。

Answer 2

如果没有上下文的任何 jsfiddle，很难弄清楚。你的链接功能是什么？你的控制器功能是什么？

顺便说一下，这是正常的行为，因为文档说 transclude:true 也会创建一个新范围。

看这里：https://github.com/angular/angular.js/wiki/Understanding-Scopes

嵌入的和孤立的范围（如果有的话）是同级的—— 每个作用域的 $parent 属性引用相同的父作用域。什么时候 一个嵌入和一个隔离范围都存在，隔离范围属性 $$nextSibling 将引用嵌入的范围。

因此，如果您想从彼此访问 2 个兄弟姐妹，您必须使用与它们的父级的 2-way 绑定