scope(作用域) 是应用在 html (视图) 和 javascript (控制器)之间的纽带。
scope 是一个对象，有可用的方法和属性。
scope 可应用在视图和控制器上。
$rootscope
每个angularjs应用默认有一个根作用域--$rootscope， 根作用域位于最顶层，作为其他作用域的父作用域，可作用于整个应用中。
$scope
scope(作用域)对应mvc模式的model，是应用在html(视图)和javascript(控制器)之间的纽带，可应用在视图和控制器上。
scope是表达式执行的上下文，同时作用域也是一个对象，有可用的方法和属性。
一、变量的取值和赋值
我要评论
<div ng-controller="parentctrl">
<span>{{number}}</span>
<div ng-controller="childctrl">
<span>{{number}}</span>
<button ng-click="number = number +1">增加</button>
</div>
</div>
function parentctrl($scope){
$scope.number = 1;
}
function childctrl($scope){
}
效果：
界面上显示了两个1，但当我们点击按钮之后，childctrl作用域内的数据改变了，parentctrl作用域内的数据没有改变
分析：
①childctrl作用域继承了parentctrl作用域(类似于javascript的原型链继承)，所以childctrl作用域可以访问到parentctrl的内容。
②点击按钮后childctrl作用域就会创建一个number基础类型变量，当childctrl已有某个基础类型变量就不会访问原型链。
解决：
①可以使用$parent来指定上级作用域改变
<div ng-controller="parentctrl">
<span>{{number}}</span>
<div ng-controller="childctrl">
<span>{{number}}</span>
<button ng-click="$parent.number = number +1">增加</button>
</div>
</div>
②使用引用类型变量，内外层作用域均是data对象的引用，修改对象的属性，引用的还是同一个变量。
<div ng-controller="parentctrl">
<span>{{data.number}}</span>
<div ng-controller="childctrl">
<span>{{data.number}}</span>
<button ng-click="data.number = data.number +1">增加</button>
</div>
</div>
function parentctrl($scope){
$scope.data.number = 123';
}
function childctrl($scope){
}
ng-if、ng-repeat、ng-switch、ng-include等指令也会产生新作用域
二、directive中的作用域
.directive("mydirective", function () {
return {
restrict: "ae",
scope: {
name: '@myname',
age: '=',
changeage: '&changemyage'
},
replace: true,
template: "<div class='my-directive'>" +
"我的名字是：<span ng-bind='name'></span><br/>" +
"我的年龄是：<span ng-bind='age'></span><br/>" +
"在这里修改名字：<input type='text' ng-model='name'><br/>" +
"<button ng-click='changeage()'>修改年龄</button>" +
" </div>"
}
①scope：false
当scope设置为false的时候,我们创建的指令和父作用域（其实是同一个作用域）共享同一个model模型，所以在指令中修改模型数据，它会反映到父作用域的模型中。
②scope：true
当scope设置为true的时候，我们就新创建了一个作用域，只不过这个作用域是继承的父作用域；可以这样理解，我们新创建的作用域是一个新的作用域，只不过在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。
③scope：{}
@ 这是一个单项绑定的前缀标识符
<div my-directive my-name="{{name}}"></div>
属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
= 这是一个双向数据绑定前缀标识符
<div my-directive age="age"></div>
数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。
& 这是一个绑定函数方法的前缀标识符
<div my-directive change-my-age="changeage()"></div>
属性的名字要用-将多个个单词连接。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论