<b>内容結構 </b>
一.原因分析
二. 解決辦法
<b>一.原因分析 </b>
1.由于原型繼承的關系,修改父級對象中的somebarevalue會同時修改子對象中的值,但反之則不行。
2.ng-if 以及 ng-repeat 會建立一個子級作用域,如果在這倆個指令中添加了元素,并增加ng-model指令,那麼ng-model對應的作用域屬于子級作用域,并非controller注入的$scope對應的作用域。
<b>二.解決辦法(推薦使用第一種方式) </b>
1.如果将模型對象的某個屬性設定為字元串,它會通過引用進行共享,是以在子$scope中修改 屬性也會修改父$scope中的這個屬性。下面的例子展示了正确的做法:
<div ng-controller="somecontroller">
{{ somemodel.somevalue }}
<button ng-click="someaction()">communicate to child</button>
<div ng-controller="childcontroller">
<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>