angularjs：指令创建两个子范围（不隔离范围）？以及如何获得一个元素的范围是什么？[通过明确的答案解决] [英] angularjs: directive creates two child scope(not isolation scope)? and how to get scope of an element?[Solved by clear answer]

问题描述

我写我的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

从文档，我只希望创建一个子范围，因为'范围=真正的'将不会创建一个孤立的范围。这导致由'NG-transclude'取代所有元素实际上继承范围（005），并有在控制器中定义的职能/性能没有访问，因为他们是在适用范围（004），这是范围（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-范围补充说：但是，我怎么能匹配NG-scope就在作用域控制台batarang显示？像节目NG-范围的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.

感谢

推荐答案

范围：真正的将创建一个新的子作用域<一个href=\"http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs\">prototypically继承了控制范围＆ndash的的;这是适用范围004。

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

范围：{...} 将创建一个新的子范围不中典型从控制器范围继承

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：真正的，另一个（transcluded）子范围005被创建。 Transcluded示波器始终来自中典型的控制范围继承。

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

正如你已经发现了你的指令范围定义，性质和功能（即你的指令中）不可用视图，因为视图使用transcluded范围。

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.

上面的图片是基于以下code：

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';
}

所以，你可以从图中，transcluded范围（因此transcluded内容）看只能访问属性和功能的控制器范围（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-范围的
  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屋！