之前在做到party bid接受到的短信,实时更新到页面上的功能时,只是让页面刷新了一下,虽然功能可以实现,但是对angular的scope没有深入理解。
下面我们对angular的scope深入探讨一下:
1.什么是作用域
作用域是一个指向应用模型的对象。它是表达式的执行环境。作用域有层次结构,这个层次结构和相应的DOM几乎是一样的。作用域能监控表达式和传递事件。
2,作用域特点
- 作用域通过$watch来观察模型的变化。
- 作用域通过$apply将任何模型的改变从“AngularJS领域 ”通过系统映射到视图上。
- 作用域能通过共享模型成员的方式嵌套到应用组件上。一个作用域从父作用域继承属性。(这里涉及到js原型链的继承机制)
- 作用域提供表达式执行的上下文。比如说表达式{{name}}本身是无意义的,要放到指定name属性的作用域中
3.作为数据模型的作用域
作用域是控制器和视图之间的“胶水”(正如party bid第一张卡小结里的angular路由的示图)。在模板链接阶段,指令设置好作用域的$watch表达式。$watch使得指令能知晓属性的改变,这使得指令能重新渲染和更新DOM中的值。以下面的代码为例,来理解scope。
activityStart.html
<div ng-controller='ActivityStartCtrl'> <header> 活动报名 ({{applies.length}}人) <div class='header-right' ng-switch='switch'> <button ng-click='apply_start()' ng-disabled='flag' ng-switch-when='start'>开始</button> <button ng-click='apply_end()' ng-switch-when='end'>结束</button> </div> </header> <div> <ul id='applylist'> <li ng-repeat='apply in applies'> {{apply.applyname}}{{apply.phone}} </li> </ul> </div> </div>controller.js
angular.module('partyBidApp') .controller('ActivityStartCtrl', function ($scope, $routeParams) { $scope.activity_name = $routeParams.activity_name; $scope.applies = Apply.get_apply_list($scope.activity_name); $scope.switch = Apply.check_apply_status($scope.activity_name); $scope.apply_start = function () { $scope.switch = 'end'; } $scope.apply_end = function () { $scope.switch = 'start'; } } });
上例中,ActivityStartCtrl控制器分别将作用域(scope)的属性activity_name,applies,switch赋值,作用域将赋值的操作通知给相应的DOM,然后DOM重新渲染更新。这样控制器就将数据写入了作用域。
同样,控制器也能将行为添加到作用域,正如apply_start和apply_end方法,当点击开始或者结束按钮时,相应的作用域会更新。
现在,真正的问题来了,在contoller外面如何更新$scope.applies的值,因为我们把接受到的短信,实时更新到页面上。想要解决这个问题,需要先了解一下内容:
1).作用域是分层级的,类似DOM树。作用域和DOM相关联的时候,angular会自动给相应的DOM添加ng-scope类名。
2).从DOM中获取作用域,可以使用angular.element(‘这里是要选取的html元素’).scope()方法。
3).当浏览器调用angular上下文之外的js代码时,angular不知道模型的的更改的。要正确处理模型的更改,就要使用$apply方法进入angular的执行上下文。只有在$apply方法里执行的模型的修改才会正确地被angular处理。
这样,我们的更新信息的方法就有了。如下:
refreshMessage.js
Message.refresh_apply_messages=function(){ var apply_messages=document.getElementById('applylist');//获取html元素 var apply_messages_scope=angular.element(apply_messages).scope();//获取在该元素上的作用域 apply_messages_scope.$apply(function(){ apply_messages_scope.applies=Apply.get_apply_list(apply_messages_scope.activity_name);//调用scope下的$apply方法,进入到angular上下文,使angular处理scope的变化。 }); }
相关推荐
有关作用域的新描述给理解多环境下的变量提供了一种有用的方法,它为javascript的工作过程提供了一个强大的新理解。 每个javascript执行环境都有一个和它关联在一起的作用域链(scope chain).这个作用域链是一个对象...
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。 ...
所以作用域到底是什么,通俗的说,可以这样理解:作用域就是定义变量的位置,是变量和函数的可访问范围,控制着变量和函数的可见性和生命周期。 而JavaScript中的作用域,在ES6之前和ES6之后,有两种不同的情况。 ...
变量的作用域(scope of a variable) 就指变量在程序中可以被引用的范围。 变量的作用域 public static void method1(){ . . for ( int i = 1 ; i; i++) { . . int j ; . . . } //for结束 } //method1()方法 结束 i...
虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! 作用域(Scope) 1. 什么是作用域 作用域是在运行时代码中的某些特定部分中...
一个变量的作用域(scope)是程序源代码中定义的这个变量的区域。 1. 在JS中使用的是词法作用域(lexical scope) 不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量(global scope) 在函数内声明的...
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。 ...
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。 一、...
这一章专门讨论与执行上下文直接相关的更多细节,这次我们将提及一个议题——作用域链。 英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/ 中文参考:http://www.denisdeng.com/?p=908 ...
作用域是一个变量和函数的作用范围,javascript中函数内声明的所有变量在函数体内始终是可见的,在javascript中有全局作用域和局部作用域,但是没有块级作用域,局部变量的优先级高于全局变量,通过几个示例来了解下...
作用域 Scope Javascript 中的函数属于词法作用域,也就是说函数在它被定义时的作用域中运行而不是在被执行时的作用域内运行。这是犀牛书上的说法。但”定义时”和”执行(被调用)时”这两个东西有些人搞不清楚。...
从表面理解即封闭的包,与作用域有关。所以,说闭包以前先说说作用域。 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性...
本文实例分析了javascript作用域链(Scope Chain)用法。分享给大家供大家参考,具体如下: 关于js的作用域链,早有耳闻,也曾看过几篇介绍性的博文,但一直都理解的模棱两可。近日又精心翻看了一下《悟透Javascript》...
对于JavaScript而言,理解作用域更加重要,因为在JavaScript中,作用域可以用来确定this的值,并且JavaScript有闭包,闭包是可以访问外部环境的作用域的。 每一个JavaScript的函数都是Function对象的一个实例,...
Javacript 中有一系列作用域的概念。对于新的JS的开发人员无法理解... 什么是作用域(scope)? 什么是全局(Global)和局部(Local)作用域? 什么是命名空间和作用域的区别? 什么是this关键字且作用域对其的影响? 什
我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间。在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量。 c语言的变量分为全局变量和局部变量,全局变量的作用范围是任何...
JavaScript中有Scope(作用域),Scope chain(作用域链),Execute context(执行上下文),Active Object (活动对象),Dynamic Scope(动态作用域),Closure(闭包)这些概念,要理解这些概念,我们从静态和动态两个方面去...
这个内部的[[scope]] 属性引用的就是创建它们的执行环境的作用域链,同时,当前执行环境的活动对象被添加到该对象列表的顶部。当我们在函数内部访问变量时,其实就是在作用域链上寻找变量的过程。 理论性太强了(总结...
深入理解JavaScript系列(14):作用域链(Scope Chain) 深入理解JavaScript系列(15):函数(Functions) 深入理解JavaScript系列(16):闭包(Closures) 深入理解JavaScript系列(17):面向对象编程之一般...