Question

有人可以向我解释为什么使用以下代码：

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

我正在查看{{message}} Football Game的所有实例？我希望最后一个是Basketball Game，因为一开始编译器在外部的指令范围内搜索，它可以找到名为message的属性，其中Basketball Game为值。为什么不使用它？

Answer 1

这是因为最后一条消息是在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>

指令范围和继承

1 个答案: