AngularJS: Правильное использование нг-модели

Question

Я читал Угловое Js документы, когда я наткнулся на вопросы, упомянутые связанные с использованием ng-model директив, как ng-include, ng-switch и ng-view .Отель причина была упомянута child scope и parent scope, но я не смог чтобы понять это полностью.
Также было упомянуто, что проблему с примитивами можно легко избежать, следуя «лучшей практике» всегда иметь «.». в вашем ng-model.
Вот link
Может ли кто-нибудь объяснить это на менее техническом языке?

Answer 1

ng-include, ng-switch и ng-if создает детский прицел. Это означает, что если вы создаете

<div ng-controller="MyCtrl"> 
    <div id="innerDiv" ng-if="!something"> 
    <input ng-model="model"> 
    </div> 
</div>` 

model будет создан в рамках созданного #innerDiv (из-за использования ng-if). Это может быть проблематично, если вы хотите использовать значение model в контроллере, потому что это будет невозможно (у родительской области нет доступа к свойствам детской области!).

Решение должно использовать $parent.model в <input ng-model="model">. Затем свойство будет изменено в области родителя, и это то, чего вы обычно хотите достичь.

Однако использование $parent может показаться нехорошим для кого-то, поэтому лучшим решением является создание именованной модели в контроллере. Вы можете использовать его и следовать правилу «всегда есть». в вашей ng-модели ». Детский охват, созданный ng-if, имеет доступ к области действия parrent, поэтому он может использовать уже определенные $scope.model и изменить $scope.model.text.

Контроллер:

$scope.model = {}; 

Html:

<div ng-controller="MyCtrl"> 
    <div id="innerDiv" ng-if="!something"> 
    <input ng-model="model.text"> 
    </div> 
</div>` 

(Но помните, что если вы не определить $scope.model в контроллере, он будет вести себя, как в первом примере).

Если вы не уверены, что находитесь в одних и тех же областях, вы можете проверить его, указав область видимости $id. Просто добавьте html {{$id}} выше ng-if (или ng-include, ng-switch) и внутри.

<div ng-controller="MyCtrl"> 
    scope id: {{$id}} 
    <div id="innerDiv" ng-if="!something"> 
    child scope id:{{$id}} 
    </div> 
    <div>scope id again {{$id}}</div> 
</div>` 

Некоторые примеры: https://jsfiddle.net/La90btfh/3/