Search code examples
angularjsangularjs-scope

Directives scopes and inheritance

Could someone explain to me, why with the following code:

<html ng-app="myApp">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>   

<body>
   <div ng-controller="myController"> 
       {{message}}
    <div ng-if=true>
        {{message}}
        <div outer   style="background:yellow;padding:20px">
            {{message}}    
        </div>
    </div>  

   </div>
<script>
   angular.module('myApp',[])
   .controller('myController', function ($scope,$rootScope){   
       $scope.message="Football game";
   })
   .directive('outer',  function() {
            return {  

               scope: {}, 
               link:{
                   post:function(scope,element){ 
                       scope.message="Basketball.game";                                           
                    }
               }
            }

    });
</script> 

</body>
</html>

I am getting for all instances of {{message}} Football Game? I would expect the last one to be Basketball Game since at first, compiler is searching inside outer's directive scope and it can find property named message with Basketball Game as value. Why it does not use that?

enter image description here

Solution

  • It's because the last message is evaluated in the scope of myController and not as you expect in the directives scope. It's unknown the the directive scope because you made a isolated scope with scope: {}, if you set scope: true, it will do as you think because it'll act as a child scope.

    Working with isolated scope 

    <html ng-app="myApp">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>   

<body>
   <div ng-controller="myController"> 
       {{message}}
    <div ng-if=true>
        {{message}}
        <div outer   style="background:yellow;padding:20px">
            {{message}}    
        </div>
    </div>  

   </div>
<script>
   angular.module('myApp',[])
   .controller('myController', function ($scope,$rootScope){   
       $scope.message="Football game";
   })
   .directive('outer',  function() {
            return {  

               scope: {}, 
               link:{
                   post:function(scope,element){ 
                       scope.message="Basketball.game";                                           
                    }
               },
               template: "<div>This is directive {{message}}</div>",
               
            }
    });
</script> 

</body>
</html>

    Working with child scope

    <html ng-app="myApp">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>   

<body>
   <div ng-controller="myController"> 
       {{message}}
    <div ng-if=true>
        {{message}}
        <div outer   style="background:yellow;padding:20px">
            {{message}}    
        </div>
    </div>  

   </div>
<script>
   angular.module('myApp',[])
   .controller('myController', function ($scope,$rootScope){   
       $scope.message="Football game";
   })
   .directive('outer',  function() {
            return {  

               scope: true, 
               link:{
                   post:function(scope,element){ 
                       scope.message="Basketball.game";                                           
                    }
               },

            }

    });
</script> 

</body>
</html>