angularjs:指令创建两个子范围(不是隔离范围)?以及如何获取元素的范围? [英] angularjs: directive creates two child scope(not isolation scope)? and how to get scope of an element?

问题描述

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

I am writing my angularjs directive with definition like:

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

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

I notice two scopes was created:

< 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)的同级对象.

from the document I am expecting only one child scope was created because 'scope=true' will not create an isolated scope. this leads all elements replaced by 'ng-transclude' actually inherit Scope(005) and have no access to my functions/properties defined in controller because they are in Scope(004) which is a sibling of Scope(005).

我不知道怎么了，有人可以在这里扔灯吗?

I don't know what's going wrong, can somebody throw some lights here?

当使用Chrome调试器观看我的元素时，我注意到这些元素是由"ng-scope"类添加的，但是，如何将"ng-scope"与batarang控制台中显示的范围相匹配?就像显示ng-scope的ID.

And when using Chrome debugger to watch my elements, I notice these elements were added by a class "ng-scope", however, how can I match "ng-scope" to scopes showing in batarang console? like show ng-scope's id.

谢谢

推荐答案

scope: true将创建一个新的子范围，该子范围

scope: true will create a new child scope that prototypically inherits from the controller scope – this is Scope 004.

scope: { ... }将创建一个新的子作用域，该子作用域不典型地继承自控制器作用域.

scope: { ... } would create a new child scope that does not prototypically inherit from the controller scope.

无论哪种方式，都会创建一个新的子范围.

Either way, a new child scope is created.

此外，因为您使用的是transclude: true，所以将创建另一个(已包含)子作用域005.超越范围的作用域始终总是从控制器范围继承而来.

In addition, because you are using transclude: true, another (transcluded) child scope 005 is created. Transcluded scopes always prototypically inherit from the controller scope.

您已经发现，在指令范围内(即在指令内部)定义的属性和函数对视图不可用，因为该视图使用了已包含的作用域.

As you already discovered, properties and functions that you define on the directive scope (i.e., inside your directive) are not available to the view because the view uses the transcluded scope.

上面的图片基于以下代码:

The picture above is based on the following code:

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)上定义的属性和函数.

So, as you can see from the diagram, the transcluded scope (hence the transcluded content) can only access properties and functions defined on the controller scope (003), via the prototype chain.

如何将"ng-scope"与batarang控制台中显示的范围相匹配?像显示ng-scope的 ID.

how can I match "ng-scope" to scopes showing in batarang console? like show ng-scope's id.

我不知道有什么方法可以做到这一点(这就是为什么我写了一个工具来绘制自己的图片的原因).

I'm not aware of any way to do this (which is why I wrote a tool to draw my own pictures).

这篇关于angularjs:指令创建两个子范围(不是隔离范围)?以及如何获取元素的范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！