angularjs: directive creates two child scope(not isolation scope)? and how to get scope of an element?

Question

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

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?

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.

thanks

score 15 · Accepted Answer · edited May 23 '17 at 12:24

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.

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.

enter image description here

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

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.

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).

For the ng-scope part you could create a scope.name variable in each scope and use a ng-class to display the scope name in the various Dom elements — Sebastien C., Aug 20 '13 at 14:08
awesome reply! it's quite clear now, I think it benefits lots of people pursuing the same problem. Thank you very much! — zx_wing, Aug 21 '13 at 01:02
by the way, what's your nice tool to draw the picture? is it opensource that can be found somewhere? — zx_wing, Aug 21 '13 at 01:04
@zx_wing, the tool is only half-backed (if that), so I haven't put it on github yet. (Maybe I should, so someone else can bake it the rest of the way.) I use GraphViz to draw the pictures, an AngularJS directive to walk the scopes, and Python on the server side. — Mark Rajcok, Aug 21 '13 at 02:03

Sebastien C. · Answer 2 · 2013-08-19T07:30:28.093

it's hard to figure out without any jsfiddle for the context. What is your link function? and what is your controller function?

By the way, it is the normal behaviour as documentation says transclude:true creates also a new scope.

Look at here : https://github.com/angular/angular.js/wiki/Understanding-Scopes

The transcluded and the isolated scope (if any) are siblings -- the $parent property of each scope references the same parent scope. When a transcluded and an isolate scope both exist, isolate scope property $$nextSibling will reference the transcluded scope.

So if you want to access the 2 siblings from one another, you have to use a 2-way binding with their parent

+1, although the OP was not asking about isolate scopes. However, for the case of `scope: true`, the directive scope and the transcluded scope are both siblings, just like the isolate case (see the picture in my answer). — Mark Rajcok, Aug 20 '13 at 13:51

angularjs: directive creates two child scope(not isolation scope)? and how to get scope of an element?

2 Answers2

Linked