По некоторым ссылкам я читаю "В отличие от ng-show, директива ng-if создает новую область видимости". Но я запутался в нижеприведенном сценарии. См. Эту демонстрацию
<div ng-if="true">
<div>
visibility variable: {{showIt}}<br>
visibility variable: {{$parent.showIt}}
</div>
<a href="" ng-show="!showIt" ng-click="$parent.showIt = true">Show It</a><br>
<a href="" ng-show="!$parent.showIt" ng-click="$parent.showIt = true">Show It</a>
<div ng-show="showIt">
This is a dynamically-shown div.
<a href="" ng-click="hideIt()">Hide it</a>
</div>
</div>
В приведенном выше примере оба {{showIt}} и {{$ parent.showIt}} будут оцениваться с одинаковым значением, и даже ng-sho будет оценивать одинаковые значения. Но в ng-click, если я не укажу родительский элемент, он даст неожиданный результат, поскольку ng-if создает дочернюю область. Я также проверил, что при использовании родительской области ng-model необходимо использовать. Итак, почему {{showIt}} и {{$ parent.showIt}} будут одинаковыми?
какую осторожность я должен использовать при использовании ng-if?
ng-if
создает новую область, но не является областью выделения, поэтому он наследует прототипно от родителя.
Тем не менее, предостережение о прототипном наследовании заключается в том, что установка примитивного значения в области дочерних $parent.showIt
значение в родительской области, поэтому вам нужно явно указать $parent.showIt
а не просто showIt
в своем ng-click
.
Вот скрипка, демонстрирующая проблему: https://jsfiddle.net/sxkzzjfp/
Пример 1: child.showIt
изначально относится к parent.showIt
. Попробуйте несколько раз щелкнуть "переключение родителя", и вы увидите, что значения находятся в синхронизации. Выполнение showIt = !showIt
приводит к тому, что дочерние и родительские значения становятся развязанными, поскольку дочернее значение затеняет родительское значение.
Пример 2: это обходное решение рекомендуется Угловым. Вместо того, чтобы устанавливать примитивные значения непосредственно в области, вместо этого установите их на объект. Выполнение config.show = true
сначала ищет цепочку прототипов для объекта config
в родительской области, а затем устанавливает свойство этого объекта. В этом примере дочерние и родительские значения всегда находятся в синхронизации.
$ scope.showIt присутствует внутри области вашего дочернего объекта, а область с правами пользователя может иметь доступ к родительскому контроллеру, что является единственной причиной заселения одного и того же значения
когда вы используете какую-либо переменную $ scope для дочернего объекта. Если переменная присутствует внутри дочернего контроллера, тогда она показывает результат по отношению к дочернему значению, но если переменная отсутствует в дочернем контроллере, угловой будет искать эту переменную в родительском контроллере (не в главном родительском контроллере)
Например:-
angulare.controller('parent',function($scope){
$scope.parent="hello its me Parent";
});
angular.controller('child',function($scope){
console.log($scope.parent);//it will retrn parent value
})