好资源导航 » 文章资讯 » Angular.Js之Scope作用域的学习教程

Angular.Js之Scope作用域的学习教程

2024-02-24 20:35:03 59

scope是什么？

大家都知道在AngularJS中作用域是一个指向应用模型的对象，它是表达式的执行环境。作用域有层次结构，这个层次和相应的DOM几乎是一样的。作用域能监控表达式和传递事件。

在HTML代码中，一旦一个ng-app指令被定义，那么一个作用域就产生了，由ng-app所生成的作用域比较特殊，它是一个根作用域（$rootScope），它是其他所有$Scope的最顶层。

除了用ng-app指令可以产生一个作用域之外，其他的指令如ng-controller，ng-repeat等都会产生一个或者多个作用域。此外，还可以通过AngularJS提供的创建作用域的工厂方法来创建一个作用域。这些作用域都拥有自己的继承上下文，并且根作用域都为$rootScope。

在生成一个作用域之后，在编写AngularJS代码时，$scope对象就代表了这个作用域的数据实体，我们可以在$scope内定义各种数据类型，之后可以直接在HTML中以{{变量名}}方式来让HTML访问到这个变量。

继承作用域

AngularJS在创建一个作用域时，会检索上下文，如果上下文中已经存在一个作用域，那么这个新创建的作用域就会以JavaScript原型继承机制继承其父作用域的属性和方法。

一些AngularJS指令会创建新的子作用域，并且进行原型继承：ng-repeat、ng-include、ng-switch、ng-view、ng-controller,用scope:true和transclude:true创建的directive。

以下HTML中定义了三个作用域，分别是由ng-app指令所创建的$rootScope，parentCtrl和childCtrl所创建的子作用域，这其中childCtrl生成的作用域又是parentCtrl的子作用域。

示例一：作用域的继承实例





scopenick



angular.module('app',[])
.controller('parentCtrl',['$scope',function($scope){
$scope.args='NickDeveloperWorks';
}])
.controller('childCtrl',['$scope',function($scope){
$scope.args='NickDeveloperWorksfortest';
}]);

继承作用域符合JavaScript的原型继承机制，这意味着如果我们在子作用域中访问一个父作用域中定义的属性，JavaScript首先在子作用域中寻找该属性，没找到再从原型链上的父作用域中寻找，如果还没找到会再往上一级原型链的父作用域寻找。在AngularJS中，作用域原型链的顶端是$rootScope，AnguarJS将会寻找到$rootScope为止，如果还是找不到，则会返回undefined。

我们用实例代码说明下这个机制。首先，我们探讨下对于原型数据类型的作用域继承机制：

示例二：作用域继承实例-原始类型数据继承





scopenick



angular.module('app',[])
.controller('parentCtrl',['$scope',function($scope){
$scope.args='NickDeveloperWorks';
}])
.controller('childCtrl',['$scope',function($scope){
}]);

测试运行结果：

第一个输入框：

虽然在childCtrl中没有定义具体的args属性，但是因为childCtrl的作用域继承自parentCtrl的作用域，因此，AngularJS会找到父作用域中的args属性并设置到输入框中。而且，如果我们在第一个输入框中改变内容，内容将会同步的反应到第二个输入框。

第二个输入框：

第二个输入框的内容从此将不再和第一个输入框的内容保持同步。在改变第二个输入框的内容时，因为HTML代码中model明确绑定在childCtrl的作用域中，因此AngularJS会为childCtrl生成一个args原始类型属性。这样，根据AngularJS作用域继承原型机制，childCtrl在自己的作用域找得到args这个属性，从而也不再会去寻找parentCtrl的args属性。从此，两个输入框的内容所绑定的属性已经是两份不同的实例，因此不会再保持同步。

现将代码做如下修改，结合以上两个场景，会出现怎样的结果？

示例三：作用域继承实例-对象数据继承





scopenick



angular.module('app',[])
.controller('parentCtrl',['$scope',function($scope){
$scope.args={};
$scope.args.content='NickDeveloperWorks';
}])
.controller('childCtrl',['$scope',function($scope){
}]);

测试结果是无论改变任何一个输入框的内容，两者的内容始终同步。

根据AngularJS的原型继承机制，如果ng-model绑定的是一个对象数据，那么AngularJS将不会为childCtrl创建一个args的对象，自然也不会有args.content属性。这样，childCtrl作用域中将始终不会存在args.content属性，只能从父作用域中寻找，也即是两个输入框的的变化其实只是在改变parentCtrl作用域中的args.content属性。因此，两者的内容始终保持同步。

我们再看一个例子，分析结果如何。

示例四：作用域继承实例-不再访问父作用域的数据对象。





scopenick



angular.module('app',[])
.controller('parentCtrl',['$scope',function($scope){
$scope.args={};
$scope.args.content='NickDeveloperWorks';
}])
.controller('childCtrl',['$scope',function($scope){
$scope.args={};
$scope.args.content='NickDeveloperWorksfortest';
}]);

测试结果是两个输入框的内容永远不会同步。子作用域有实例数据对象，则不访问父作用域。

独立作用域

独立作用域是AngularJS中一个非常特殊的作用域，它只在directive中出现。在对directive的定义中，我们添加上一个scope:{}属性，就为这个directive创建出了一个隔离作用域。

示例5：directive创建出一个孤立作用域

angular.module('isolate',[]).directive("isolate",function(){
return{
scope:{},
};
})

独立作用域最大的特点是不会原型继承其父作用域，对外界的父作用域保持相对的独立。因此，如果在定义了孤立作用域的AngularJSdirective中想要访问其父作用域的属性，则得到的值为undefined。代码如下：

示例六：独立作用域的隔离性





scopenick



angular.module('app',[])
.controller('ctrl',['$scope',function($scope){
$scope.args={};
}])
.directive("isolateDirective",function(){
return{
scope:{},
link:function($scope,$element,$attr){
console.log($scope.$args);//输出undefined
}
};
});

上面的代码中通过在directive中声明了scope属性从而创建了一个作用域，其父作用域为ctrl所属的作用域。但是，这个作用域是孤立的，因此，它访问不到父作用域的中的任何属性。存在这样设计机制的好处是：能够创建出一些列可复用的directive，这些directive不会相互在拥有的属性值上产生串扰，也不会产生任何副作用。

AngularJS独立作用域的数据绑定

在继承作用域中，我们可以选择子作用域直接操作父作用域数据来实现父子作用域的通信，而在独立作用域中，子作用域不能直接访问和修改父作用域的属性和值。为了能够使孤立作用域也能和外界通信，AngularJS提供了三种方式用来打破独立作用域“孤立”这一限制。

单向绑定（@或者@attr）

这是AngularJS独立作用域与外界父作用域进行数据通信中最简单的一种，绑定的对象只能是父作用域中的字符串值，并且为单向只读引用，无法对父作用域中的字符串值进行修改，此外，这个字符串还必须在父作用域的HTML节点中以attr（属性）的方式声明。

使用这种绑定方式时，需要在directive的scope属性中明确指定引用父作用域中的HTML字符串属性，否则会抛异常。示例代码如下：

实例七：单向绑定示例





scopenick

上面的代码，通过在directive中声明了scope:{isolates:'@'}使得directive拥有了父作用域中data-isolates(isolates为自定义属性，不加data也可以，但建议加上data)这个HTML属性所拥有的值，这个值在控制器ctrl中被赋值为'nick'。所以，代码的运行结果是页面上有两个名为nick的按钮。

我们还注意到link函数中对isolates进行了修改，但是最终不会在运行结果中体现。这是因为isolates始终绑定为父作用域中的btns字符串，如果父作用域中的btns不改变，那么在孤立作用域中无论怎么修改isolates都不会起作用。

通过这种形式的绑定，孤立作用域将有能力访问到父作用域中的函数对象，从而能够执行父作用域中的函数来获取某些结果。这种方式的绑定跟单向绑定一样，只能以只读的方式访问父作用函数，并且这个函数的定义必须写在父作用域HTML中的attr（属性）节点上。

这种方式的绑定虽然无法修改父作用域的attr所设定的函数对象，但是却可以通过执行函数来改变父作用域中某些属性的值，来达到一些预期的效果。示例代码如下：

示例八：引用绑定示例





scopenick

这个例子中，浏览器的控制台将会打印“NickDeveloperWorks”文字。

上面的代码中我们在父作用域中指定了一个函数对象$scope.func，在孤立作用域中通过对HTML属性的绑定从而引用了func。需要注意的是link函数中对func对象的使用方法，$scope.isolates获得的仅仅是函数对象，而不是调用这个对象，因此我们需要在调用完$scope.isolates之后再调用这个函数，才能得到真正的执行结果。

双向绑定（=或者=attr）

双向绑定赋予AngularJS孤立作用域与外界最为自由的双向数据通信功能。在双向绑定模式下，孤立作用域能够直接读写父作用域中的属性和数据。和以上两种孤立作用域定义数据绑定一样，双向绑定也必须在父作用域的HTML中设定属性节点来绑定。

双向绑定非常适用于一些子directive需要频繁和父作用域进行数据交互，并且数据比较复杂的场景。不过，由于可以自由的读写父作用域中的属性和对象，所以在一些多个directive共享父作用域数据的场景下需要小心使用，很容易引起数据上的混乱。

示例代码如下：

示例九：双向绑定示例





scopenick

上面的代码运行的结果是浏览器页面上出现三个按钮，其中第一个按钮标题为“DeveloperWorks”，第二和第三个按钮的标题为“NICK”。

初始时父作用域中的$scope.btns.name为小写的“nick”，通过双向绑定，孤立作用域中将父作用域的name改写成为大写的“NICK”并且直接生效，父作用域的值被更改。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
514930285
czq8825@qq.com

Angular.Js之Scope作用域的学习教程

热门推荐

随机推荐