内容结构
一.原因分析
二. 解决办法
一.原因分析
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>