переменная и ее родительская область видимости внутри нг-если

0

По некоторым ссылкам я читаю "В отличие от 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?

Теги:

2 ответа

4
Лучший ответ

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 в родительской области, а затем устанавливает свойство этого объекта. В этом примере дочерние и родительские значения всегда находятся в синхронизации.

1

$ 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
})

Ещё вопросы

Сообщество Overcoder
Наверх
Меню