內容結構 ? ? ? ??
? ? ? 一.原因分析
? ? ? 二. 解決辦法?
一.原因分析 ? ? ? ?
1.由于原型繼承的關系,修改父級對象中的someBareValue會同時修改子對象中的值,但反之則不行。
2.ng-if 以及 ng-repeat 會創建一個子級作用域,如果在這倆個指令中添加了元素,并增加ng-model指令,那么ng-model對應的作用域屬于子級作用域,并非controller注入的$scope對應的作用域。
二.解決辦法(推薦使用第一種方式) ? ? ??
1.如果將模型對象的某個屬性設置為字符串,它會通過引用進行共享,因此在子$scope中修改 屬性也會修改父$scope中的這個屬性。下面的例子展示了正確的做法:
<div ng-controller="SomeController">
? ? ? ? ?{{ someModel.someValue }}
? ? ? ? ?<button ng-click="someAction()">Communicate to child</button>
? ? ? ? ?<div ng-controller="ChildController">
? ? ? ? ?{{ someModel.someValue }}
? ? ? ? ? ? ?<button ng-click="childAction()">Communicate to parent</button>
? ? ? ? ?</div>
</div>
? ? ?angular.module('myApp', [])
? ? ?.controller('SomeController', function($scope) {
// 最佳實踐,永遠使用一個模式?
? ? ? ?$scope.someModel = {
? ? ? ? ? ? ?someValue: 'hello computer'
? ? ? ? ?}
? ? ? ? ?$scope.someAction = function() {
? ? ? ? ? ? ?$scope.someModel.someValue = 'hello human, from parent';
}; })
? ? ?.controller('ChildController', function($scope) {
? ? ? ? ?$scope.childAction = function() {
? ? ? ? ? ? ?$scope.someModel.someValue = 'hello human, from child';
? ? ? ? ?};
});?
2.使用父級作用域 ? ? ? ? ? ? ? ? ? ? ? ? ? ?
<select class="form-control m-b" ng-model="$parent.data" ?ng-options="item.id as item.name for item in datas">
? ? ? <option value="">-- 請選擇 --</option>
</select>