首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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”并且直接生效，父作用域的值被更改。

总结

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

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

- Author -

webNick

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript面向对象入门基础详细介绍
Sep 05 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
vue中axios封装使用的完整教程
Mar 03 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
闭幕词(9) 观后感(479) 慰问信(53) 通知(159) HAM-2000(1) 文书(291) 开幕词(63) 实用文书(952) 申请书(21) 导游词(322)
You might like
PHP 之Section与Cookie使用总结
2012/09/14 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
微信公众平台开发教程（五）详解自定义菜单
2016/12/02 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
JavaScript之数组扁平化详解
2019/06/03 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python返回真假值（True or False）小技巧
2015/04/10 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
python实现快递价格查询系统
2020/03/03 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
微软澳洲官方网站：Microsoft Australia
2017/01/10 全球购物
心理健康教育心得体会
2013/12/29 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers