Angular JS 中 ng-controller 值复制和引用复制

Posted 2020-10-26 pikzas

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular JS 中 ng-controller 值复制和引用复制相关的知识，希望对你有一定的参考价值。

我们知道在使用ng-app或者ng-controller指令的时候，都会创建一个新的作用域（$rootScope或者是$scope），并且在使用ng-controller指令创建的作用域会继承父级作用域（$rootScope或者是$scope）所有的方法和属性。

但是这里继承的属性就有一些学问了

运行如下代码：

html

<div ng-controller="SomeController">
　　{{ someBareValue }}
　　<button ng-click="someAction()">Parent button</button>
　　<div ng-controller="ChildController">
　　　　{{ someBareValue }}
　　　　<button ng-click="childAction()">Child button</button>
　　</div>
</div>

angular.module(‘myApp‘, [])
　　.controller(‘SomeController‘, function($scope) {
　　　　$scope.someBareValue = ‘hello computer‘;
　　　　$scope.someAction = function() {
　　　　　　$scope.someBareValue = ‘hello human, from parent‘;
　　　　};
　　})
　　.controller(‘ChildController‘, function($scope) {
　　　　$scope.childAction = function() {
　　　　　　$scope.someBareValue = ‘hello human, from child‘;
　　　　};
　　});

初始加载完，父子作用域显示同样的值

当点击Parent button的时候，可以看到父子作用域同时变化

然后点击Child button的时候，子作用域的值更新了

而后再次点击Parent button的时候，发现父作用域更新了，但是子作用域却不在变化。

这是因为，父子作用域间的继承是通过的是一个 字符串数字或者布尔值来实现的，这就是JS的值复制。

再运行如下代码：

html

<div ng-controller="SomeController">
　　{{ someModel.someValue }}
　　<button ng-click="someAction()">Parent button</button>
　　<div ng-controller="ChildController">
　　　　{{ someModel.someValue }}
　　　　<button ng-click="childAction()">Child Button</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‘;
　　　　};
　　});