AngularJs之controller控制器scope父子集作用域实例

AngularJs的作用域问题，如果之前很好的学习并应用过JavaScript，那么对作用域、作用域链以及闭包的概念肯定不会陌生，总之一句话就是：子级可以访问父级的变量和对象，但父级无法访问子级的任何变量和对象。

如下代码：

1 function fn1(){ 2     var obj1 = {name : 'K`illCode个人技术博客'}; 3     function fn2(){ 4         console.log(obj1.name); 5     } 6     return fn2(); 7 } 8 fn1();

详情可参考这篇文章：《JavaScript面试题(闭包+作用域+变量提升)》。

在AngularJs中同样也存在作用域的问题，请看以下代码：

html部分：

1 <div ng-app="app" ng-controller="ctr1"> 2     <input type="text" ng-model="data.name"> 3     <div ng-controller="ctr2"> 4         {{data.name}} 5     </div> 6 </div>

JavaScript部分：

1 var m = angular.module('app', []); 2 m.controller('ctr1', ['$scope', function($scope){ 3     $scope.data = { 4         name : 'K`illCode个人技术博客' 5     }; 6 }]); 7 m.controller('ctr2', ['$scope', function($scope){ 8     $scope.name = 'K`illCode AngularJs学习笔记'; 9 }]);

然后在input输入框中改变value值，发现控制器ctr2中的值也在发生变化，原因如下：

控制器ctr2中并没有data.name这个值，所以在html中进行访问的之后，发现没有，所以就去它的上一级ctr1中去找，这时候找到了有data.name，所以就引用了ctr1中的值。

注意，我们定义的data是一个对象，js中对象的引用是【传址】的，所以即便ctr2中没有data对象，也不会去自动创建，它是一直引用ctr1中的data对象。

但是如果是一个普通的变量，而不是对象，如果在本控制器中发现没有这个值，当手动通过ng-model改变值的时候，它会在本控制器里边自动创建这个变量，并且实时更新html中的数据，代码如下：

html部分：

1 <div ng-app="app" ng-controller="ctr1"> 2     <div ng-controller="ctr2"> 3         <input type="text" ng-model="name"> 4         {{name}} 5     </div> 6 </div>

JavaScript部分：

1 var m = angular.module('app', []); 2 m.controller('ctr1', ['$scope', function($scope){ 3     $scope.name = 'K`illCode个人技术博客'; 4 }]); 5 m.controller('ctr2', ['$scope', function($scope){ 6       7 }]);

默认情况下，在html中访问name值，控制器ctr2中没有，就会去父级ctr1中找，找到之后进行显示。当通过ng-model手动改变ctr1中的name值的时候，就会自动在ctr2中创建一个name变量。