1. 首页
  2. 开发

ng-controller中作用域和子作用域的继承实践

不好的示范

由于原型继承的关系,修改父级对象中的someBareValue会同时修改子对象中的值,但反之则不行。

<div ng-controller="SomeController">
	{{ someBareValue }}
	<button ng-click="someAction()">Communicate to child</button>
	<div ng-controller="ChildController">
		{{ someBareValue }}
		<button ng-click="childAction()">Communicate to parent</button>
	</div>
</div>
angular.module('myApp', [])
.controller('SomeController', function($scope) {
	// 反模式,裸值
	$scope.someBareValue = 'hello computer';
	// 设置 $scope 本身的操作,这样没问题
	$scope.someAction = function() {
		// 在SomeController和ChildController中设置{{ someBareValue }}
		$scope.someBareValue = 'hello human, from parent';
	};
})
.controller('ChildController', function($scope) {
	$scope.childAction = function() {
		// 在ChildController中设置{{ someBareValue }}
		$scope.someBareValue = 'hello human, from child';
	};
});

可以看下这个例子的实际效果, 首先点击child button,然后点击parent button。这个例子充分说明了子控制器是复制而非引用someBareValue。

JavaScript对象要么是值复制要么是引用复制。字符串、数字和布尔型变量是值复制。数组、对象和函数则是引用复制。

最佳实践

如果将模型对象的某个属性设置为字符串,它会通过引用进行共享,因此在子$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';
	};
});
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册