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


Posted in Javascript onApril 27, 2017

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 的子作用域。

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

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args= 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  $scope.args= 'Nick DeveloperWorks for test';
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args">
 <div ng-controller="childCtrl">
 <input ng-model="args">
 </div>
</div>
</body>
</html>

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

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

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

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args = 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args">
 <div ng-controller="childCtrl">
 <input ng-model="args">
 </div>
</div>
</body>
</html>

测试运行结果:

第一个输入框:

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

第二个输入框:

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

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

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

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args = {};
  $scope.args.content = 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args.content">
 <div ng-controller="childCtrl">
 <input ng-model="args.content">
 </div>
</div>
</body>
</html>

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

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

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

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

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 angular.module('app', [])
  .controller('parentCtrl', ['$scope', function($scope) {
  $scope.args = {};
  $scope.args.content = 'Nick DeveloperWorks';
  }])
  .controller('childCtrl', ['$scope', function($scope) {
  $scope.args = {};
  $scope.args.content = 'Nick DeveloperWorks for test';
  }]);
</script>
<body ng-app="app">
<div ng-controller="parentCtrl">
 <input ng-model="args.content">
 <div ng-controller="childCtrl">
 <input ng-model="args.content">
 </div>
</div>
</body>
</html>

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

独立作用域

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

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

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

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

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

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script type="text/javascript">
 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
   }
  };
  });
</script>
<body ng-app="app">
<div ng-controller="ctrl">
 <div isolate-directive></div>
</div>
</body>
</html>

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

AngularJS 独立作用域的数据绑定

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

单向绑定(@ 或者 @attr)

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

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

实例七: 单向绑定示例

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
 angular.module('isolateScope', [])
  .directive("isolateDirective", function () {
  return {
   replace : true,
   template: '<button>{{isolates}}</button>',
   scope : {
   isolates : '@',
   },
   link : function($scope, $element, $attr) {
   $scope.isolates = "DeveloperWorks";//无效
   }
  };
  })
  .controller("ctrl", function ($scope) {
  $scope.btns = 'NICK';
  });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
 <button>{{btns}}</button>
 <div isolate-directive isolates="{{btns}}"></div>
</div>
</body>
</html>

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

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

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

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

示例八:引用绑定示例

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
 angular.module('isolateScope', [])
   .directive("isolateDirective", function () {
    return {
     replace : true,
     scope : {
      isolates : '&',
     },
     link : function($scope, $element, $attr) {
      var func = $scope.isolates();
      func();
     }
    };
   })
   .controller("ctrl", function ($scope) {
    $scope.func = function () {
     console.log("Nick DeveloperWorks");
    }
   });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
 <div isolate-directive data-isolates="func"></div>
</div>
</body>
</html>

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

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

双向绑定(=或者=attr)

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

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

示例代码如下:

示例九:双向绑定示例

<!doctype html>
<html>
<head>
 <meta charset=utf-8"/>
 <title>scope nick</title>
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<script>
 angular.module('isolateScope', [])
   .directive("isolateDirective", function () {
    return {
     replace : true,
     template: '<button>{{isolates}}</button>',
     scope : {
      isolates : '=',
     },
     link : function($scope, $element, $attr) {
      $scope.isolates.name = "NICK";
     }
    };
   })
   .controller("ctrl", function ($scope) {
    $scope.btns = {
     name : 'nick',
     dw : 'DeveloperWorks'
    };
   });
</script>
<body ng-app="isolateScope" >
<div ng-controller="ctrl">
 <button>{{btns.dw}}</button>
 <button>{{btns.name}}</button>
 <div isolate-directive data-isolates="btns"></div>
</div>
</body>
</html>

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

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

总结

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

Javascript 相关文章推荐
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 #Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 #Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
Three.js的使用及绘制基础3D图形详解
Apr 27 #Javascript
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 #Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 #Javascript
You might like
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
原生js实现五子棋游戏
2020/05/28 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python类定义和类继承详解
2015/05/08 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Python 中如何写注释
2020/08/28 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
本科生求职信
2014/06/17 职场文书
助残日活动总结
2014/08/27 职场文书
地震捐款倡议书
2014/08/29 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年教研组工作总结
2014/11/26 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
mysql查看表结构的三种方法总结
2022/07/07 MySQL