指令范围和继承

有人能向我解释，为什么用下面的代码：指令范围和继承

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

我正在为{{消息}} Football Game所有实例？我期望最后一个是Basketball Game，因为起初编译器在outer的指令范围内搜索，它可以找到属性message和Basketball Game作为值。为什么它不使用它？

来源

2017-02-01 Unknown developer

这是因为最后的消息在的myController的范围进行评估，而不是因为你的指令范围的期望。由于您使用scope: {}作为独立范围，因此如果您设置了scope: true，它将按照您的想法进行操作，因为它将充当子范围，因此未知指令范围。

孤立范围

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

工作与孩子的工作范围

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

来源

2017-02-01 17:07:07

指令范围和继承

回答

相关问题