Директивы прицелы и наследование

Может кто-нибудь объяснить мне, почему с помощью следующего кода:Директивы прицелы и наследование

<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, так как сначала компилятор выполняет поиск в области внешнего вида, и он может найти свойство с именем 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

Директивы прицелы и наследование

ответ

Смежные вопросы