微客导航 » 文章资讯 » Angular 作用域scope的具体使用

Angular 作用域scope的具体使用

2023-09-19 15:33:07 154

Scope(作用域)是应用在HTML(视图)和JavaScript(控制器)之间的纽带。

Scope是一个对象，有可用的方法和属性。

Scope可应用在视图和控制器上。

$rootScope

每个AngularJs应用默认有一个根作用域--$rootScope，根作用域位于最顶层，作为其他作用域的父作用域，可作用于整个应用中。

$scope

scope(作用域)对应MVC模式的Model，是应用在HTML(视图)和JavaScript(控制器)之间的纽带，可应用在视图和控制器上。

scope是表达式执行的上下文，同时作用域也是一个对象，有可用的方法和属性。

一、变量的取值和赋值


{{number}}

{{number}}
增加

functionparentCtrl($scope){ $scope.number=1; } functionchildCtrl($scope){ }

效果：

界面上显示了两个1，但当我们点击按钮之后，childCtrl作用域内的数据改变了，parentCtrl作用域内的数据没有改变

分析：

①childCtrl作用域继承了parentCtrl作用域(类似于JavaScript的原型链继承)，所以childCtrl作用域可以访问到parentCtrl的内容。
②点击按钮后childCtrl作用域就会创建一个number基础类型变量，当childCtrl已有某个基础类型变量就不会访问原型链。

解决：

①可以使用$parent来指定上级作用域改变


{{number}}

{{number}}
增加

②使用引用类型变量，内外层作用域均是data对象的引用，修改对象的属性，引用的还是同一个变量。


{{data.number}}

{{data.number}}
增加

functionparentCtrl($scope){ $scope.data.number=123'; } functionchildCtrl($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:""+
"我的名字是：
"+
"我的年龄是：
"+
"在这里修改名字：
"+
"修改年龄"+
""
}

①scope：false

当scope设置为false的时候,我们创建的指令和父作用域（其实是同一个作用域）共享同一个model模型，所以在指令中修改模型数据，它会反映到父作用域的模型中。

②scope：true

当scope设置为true的时候，我们就新创建了一个作用域，只不过这个作用域是继承的父作用域；可以这样理解，我们新创建的作用域是一个新的作用域，只不过在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

③scope：{}

@这是一个单项绑定的前缀标识符

属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

=这是一个双向数据绑定前缀标识符

数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。

&这是一个绑定函数方法的前缀标识符

属性的名字要用-将多个个单词连接。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Angular 作用域scope的具体使用

热门推荐

随机推荐