Понимание области видимости в Чайлдс директивы

Я пытаюсь понять "областей" в agularJS и я не могу понять следующий фрагмент кода:Понимание области видимости в Чайлдс директивы

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!'; 
}]);

Как вы можете видеть, это очень простой тест. Насколько я знаю (из примера this), дочерние элементы директивы (в примере, элементы внутри «my-component») наследуют область действия от директивы, и, поскольку область «my-component» изолирована, переменная «isolatedAttributeFoo» НЕ должна принимать значение из переменной «isolatedAttributeFoo» в контроллере ... Но это так. Зачем? Я что-то недопонимаю?

Если вы хотите попробовать это, here - это скрипка.

источник

2015-07-23 MorgoZ

Вы используете родительскую переменную. Ребенок существует только в директиве inde и может быть напечатан внутри шаблона. – Fals

Ok Fals и @charlietfl, но почему в этом примере скрипта: http://jsfiddle.net/SPMfT/429/ он ведет себя как дочерние элементы внутри директивы, наследует изолированную область действия директивы, без необходимости использовать «шаблон», или "templateURL"? – MorgoZ

, что скрипка использует угловой 1.01, который является слишком старым, чтобы что-то проверить. Я не думаю, что изолированная область была даже доступна тогда – charlietfl

Вы можете выделить эту область только при включении в определение директивы template или templateUrl. Другой мудрый он будет наследовать только от родителей и просматривать даже не признают каких-либо изменений в объеме, сделанные в ссылке или контроллер директивы

Попробуйте следующее:

HTML

<my-component></my-component>

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

DEMO

источник

2015-07-23 21:14:58 charlietfl

Это не имеет никакого отношения к этому вопросу, но не могли бы вы это узнать? http://stackoverflow.com/questions/31595970/scope-variable-is-deleted-with-ng-model-options-when-validators-return-false – gr3g

-1

Я думаю, что это будет ясно:

Вот скрипка:

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>

Вашего Прицел изолирован в функцию связи.
Функция связи - это директива о том, какой контроллер предназначен для представления.

источник

2015-07-23 21:14:55 gr3g

Ну, я сделал редактирование – gr3g

Понимание области видимости в Чайлдс директивы

ответ

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