angularJS<四、多个Controller的作用域>

angularJs的作用域是针对于在html页面里面引入ng-Controller的位置来说的，angularjs的controller和javaScript的作用域很类似；如：

         <divng-controller="controllerDemo">

            <inputtype="text"ng-model="name"value="">

            <divng-controller="controllerDemo2">

            <inputtype="text"ng-model="name"value="">

            </div>

   </div>

内部的controllerDemo2的作用域可以访问到外部controllerDemo作用域的mode（既属性）如果内部的controllerDemo2的$scope作用域没有定义name时候回会直接访问到外部controllerDemo作用域的name；一但内部controllerDemo2的$scope作用域，定义了name，那就不能访问到外部controllerDemo的 name了；

然而外部的controllerDemo任何时候都不能能访问内部controllerDemo2的；

 

不说那么多，来，我们上代码

例子一、

Controller.js中代码

var controllerDemo=function($scope){

   //申明一个model

   $scope.name="小明";

   $scope.sex="男";

}

var controllerDemo2=function($scope){

 

}

html中代码：

         <divng-app="">

         <divng-controller="controllerDemo">

                <inputtype="text"ng-model="name"value="">

            <divng-controller="controllerDemo2">

                <inputtype="text"ng-model="name"value="">

            </div>

         </div>

      </div>

跑起来结果

可以看出，虽然controllerDemo2中未定义name ，但是他拿到了外面controllerDemo中name的值；

我们在input中修改外面controllerDemo的内容

发现内部controllerDemo2的input内容值跟着修改了；再次说明也是取到，取到了外部的name值

我们修改controllerDemo2的input值

再到上面输入

而外围的input值并未跟着改变，这是为什么？而且这时我们再去上面input标签中输入，内部也不会跟着修改了！这时为什么？

因为当我们在controllerDemo2的input中输入内容的时候，则在controllerDemo2的Controller中定义了name属性，所以相互不在受到影响；

 

 

例子二、

         和例子一相差不大，只需要将Controller.js中代码中的代码

var controllerDemo2=function($scope){

 

}

         修改为

var controllerDemo2=function($scope){

         $scope.name="张三";

}

然后我们在去修改input中的值，发现互相都不再受影响；说明一但内部controllerDemo2的$scope作用域，定义了name，那就不能访问到外部controllerDemo的name了。

 

是不是很简单，各位亲！