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了。
是不是很简单,各位亲!