CODEWITHSUNDEEP
htmlangularjsangularjs-directive
MorgoZ
MorgoZ

Reputation: 2052

Understanding scope in directive's childs

I'm trying to understand "scopes" in agularJS and i can't understand the following piece of code:

HTML:

<body ng-app="myModule">

<div ng-controller="MyCtrl">
    <my-component>
        <h2>Attribute</h2>
        {{isolatedAttributeFoo}}
    </my-component>

    <my-component>
        <h2>Attribute</h2>
        {{isolatedAttributeFoo}}
    </my-component>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>

AngularJS:

var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{}
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.isolatedAttributeFoo = 'Hello!';
}]);

As you can see it is a very simple test. As far as i know (from this example), the childs of a directive (in the example, the elements inside "my-component") inherit the scope from the directive and, since the "my-component" scope is isolated, the "isolatedAttributeFoo" variable should NOT take the value from the "isolatedAttributeFoo" variable at the controller... But it does. Why? Am i misunderstanding something?

If you want to try it, here is the Fiddle.

Upvotes: 1

Views: 35

Answers (2)

gr3g
gr3g

Reputation: 2914

I think this will be clear:

Here is a fiddle:

https://jsfiddle.net/kst65t0p/3/

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{},
            link : function(scope){
               alert(scope.isolatedAttributeFoo);
            }
        };
    })
    .controller('MyCtrl', ['$scope', function () {
        this.isolatedAttributeFoo = 'Hello!';        
    }]);
<div ng-app="myModule" ng-controller="MyCtrl">
    <my-component>
        <h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
    </my-component>
            
    <my-component>
        <h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
    </my-component>
</div>









<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Your scope is isolated into the link function.
The link function is to a directive what a controller is to the view.

Upvotes: -1

charlietfl
charlietfl

Reputation: 171669

You can only isolate the scope when you include the template or templateUrl in the directive definition. Other wise it will only inherit from parent and view won't even recognize any changes to scope made in link or controller of directive

Try the following:

HTML

<my-component></my-component>

JS

.directive('myComponent', function () {
    return {
        restrict:'E',
        template: ' <h2>Attribute</h2>{{isolatedAttributeFoo}}',
        scope:{},
        link:function(scope){
           scope.isolatedAttributeFoo = 'Good Bye!';
        }
    };
});

DEMO

Upvotes: 2

Related Questions