Почему нг-если создает так много проблем в angularjs

Question

Сегодня я наткнулся на очень странную проблему, просто пытаюсь понять, почему это происходит
Ниже мой HTML

<div class="partial-container workflow-cont" ng-if="true"> 
<div class="clearfix mb20"> 
     <h3 class="heading-text pull-left pointer" ng-click="resetRole()" >{{'Roles' | translate}}</h3> 
    </div> 
    <div class="inner-container blue-border clearfix relative no-padding" ng-if="true"> 
     <div class="role-left-nav pull-left"> 
    . 
    . 
    . 
    Some other html 
    . 
    . 
    . 
    <div class="any-or-select pull-none clearfix valign-middle"> 
    <p> 
     <input type="radio" name="choice_p" id="low" ng-model="defineChoice" value="0" > 
     <label for="low" class="ng-binding">{{'Absolute' | translate}}</label> 
    </p> 
    <p> 
     <input type="radio" name="choice_p" id="medium" ng-model="defineChoice" value="1" > 
     <label for="medium" class="ng-binding">{{'Attributes' | translate}}</label> 
    </p> 
    <p> 
     <input type="radio" name="choice_p" id="high" ng-model="defineChoice" value="2" > 
     <label for="high" class="ng-binding">{{'Rule' | translate}}</label> 
    </p> 
    </div> 

Теперь, когда я нажимаю кнопки радио значения модели defineChoice был успешно изменен.
Но когда я пытаюсь сделать то же самое с контроллера $ scope.defineChoice = 0 Его значение не менялось, однако, когда я сделал console.log с контроллера, он стал нулевым, но не был отражен в представлении.

Но когда я удалил ng-if = "true" со всей видимости, все прошло хорошо! Это из-за того факта, что ng-if создает дочернюю область, но если да, то почему он работал в первый раз, когда init, но позже стал кислым.

Answer 1

В Angular модели существуют в области видимости, а привязки моделей полагаются на алгоритм разрешения области, включающий прототипическое наследование области. Если привязка к модели разрешает одну и ту же модель, независимо от области действия, любые изменения в модели будут влиять на все привязки. Это называется привязкой двухканальной привязки .: изменения в модели влияют на представление, а изменения в представлении влияют на модель.

Теперь двусторонняя привязка модели работает, как и ожидалось, когда модель доступна только для чтения. Но в тех случаях, когда это не так, обычно это связано с тем, что вы привязываетесь к примитиву, используя ngModel с возможностью записи (например, ngModel и переключателем), а также задействуется дочерняя область (т. Е. NgIf); как только модель будет записана. Когда модель записывается, она создает модель в области дочернего объекта с тем же именем, что и модель в родительской области. Теперь у вас есть две копии модели, которые могут вести себя независимо друг от друга.

Как вы это решаете?

Привязать ngModel к объекту, объект которого находится в области видимости - не привязывать примитив к области видимости.

ng-model="someObj.defineChoice" 

Иногда это также называют «всегда есть точка в вашем ngModel» правило, что не всегда необходимо, но хороший ориентир, тем не менее.

Когда someObj будет разрешен, он будет правильно разрешать ссылку в правой области (через прототипическое наследование области), а затем привязываться к свойству этой ссылки. Важным моментом является то, что одна и та же модель решается с каждой привязкой к модели, так что привязка двухсторонней модели работает даже при написании модели.

Answer 2

ng-if создает дочернюю область, поэтому директивы ng-model внутри ng-if привязаны к новой области. Для доступа к родительской области используйте ng-model="$parent.defineChoice".