AngularJS中的控制器和作用域
欢迎大家指导与讨论 : )
一、 作用域的事件传播
一 . 1 修改的传播
关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的。简而言之,就是即时您只修改了某个作用域中的某个属性(比如说$scope.data),那么依赖于$scope.data的一些行为(参数含有$scope.data的一些函数),都会重新执行计算。比如下面的这个例子,每当 <input> 被输入不同的对象, getCountry(city) 就会再次计算。
<input ng-model="city" />
<p>The country is {{getCountry(city)}}</p>
一 . 2 作用域间的通信
在树上不同作用域之间要怎么样才能进行通信呢?有一种解决方案是:通过构建依赖于$rootScope的服务,可以在向全树的作用域广播事件($broadcast)。而事件的接受可以通过,在所需要的作用域上设定对应的事件接收器来完成。
app.service("EventEmitter", function($rootScope){
return {
emitEvent: function(eventType){
$rootScope.$broadcast(eventType.name)
}
}
})
app.controller("myCtrl", ['$scope', function($scope){
$scope.$on(someEvent. function(){
//...
})
}])
二、 无作用域控制器
我们可以通过创建无作用域的控制器,来使该控制器断绝所有与其他控制器的联系,它不能继承父作用域中的任何东西。但同时它还能继续向视图中提供数据和行为。
app.controller("myCtrl", function(){//不再依赖$scope
this.data = "Hello World";
this.sayHello = function(){
console.log(this.data)
}
})
三、 与其他框架一起工作
当我们需要将新功能集成到一个已有的产品或服务中,而这个产品或服务已经使用了一个不同的框架时,我们需要AngularJS和这些框架能够顺利地协同工作。
即:在AngularJS的环境中能够顺利调用其他框架,而在其他框架的环境中也要能够调用AngularJS环境中的东西。
三 . 1 AngularJS中使用其他框架
$apply或$watch 能够让事件进入到AngularJS的运行环境中,当这个事件产生变化时,AngularJS能够感知得到,并进行进一步处理(脏检查)。例子——在AngularJS中调用JQueryUI的API
$scope.$apply(function(){
$('#jqui button').button({
disabled: !disabled;
})
})
三. 2 在其他框架中调用AngularJS
为了能在其他框架中调用AngularJS,我们需要进入到AngularJS环境。此处我们需要查找到对应关联元素所在的作用域,我们需要使用scope(),而不是$scope。
$document.ready(function(){
$('#jqui button').button().click(function(e){
angular.element(someEle).scope().$apply(function(){
someHandler();
})
})
})
参考资料
《AngularJS高级程序设计》
AngularJS中的控制器和作用域的更多相关文章
- AngularJS中的控制器示例_3
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例_2
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- angularJS中如何写控制器
angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新 ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- angularjs 控制器、作用域、广播详解
一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...
- AngularJS中控制器继承
本篇关注AngularJS中的控制器继承,了解属性和方法是如何被继承的. 嵌套控制器中属性是如何被继承的? ==属性值是字符串 myApp.controller("ParentCtrl&qu ...
- AngularJS入门基础——控制器
AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是, ...
- angularJS中控制器和作用范围
$scope是$rootScope的子作用域控制对象,$rootScope的id为1,其他的为2,3,4... 不同的控制器之间,所对应的作用域控制对象$scope,之间是相互隔离的,如果要共享数据, ...
随机推荐
- 列式存储(三)JFinal DB.tx()事务
上一篇中说道了列式存储中新增表单时后台接收数据问题,在存入数据库时一次插入多条数据,就要用到事务. JFinal中有个封装好的事务应用,用起来非常方便简单. 写法1: Db.tx(new IAtom( ...
- IOS之UI--动态设置NavigationBar的颜色以及透明度
前言:有时候我们需要设置UINavigationController的导航条NavigationBar的颜色为透明度,这时候就需要使用到NavigationBar的barStyle这个属性: 再看QQ ...
- IOS学习资源收集--开发UI控件相关
收集的一些本人了解过的iOS开发UI控件相关的代码资源(本文持续补充更新) 内容大纲: 1.本人在github上也上传了我分装好的一些可重复利用的UI控件 2.计时相关的自定义UILabel控件 正文 ...
- 计算机组成原理往年试题以及答案(tzf!!!)
计算机组成原理往年试题以及答案(下载链接!!!) 太子妃升职记(1~36) ::http://pan.baidu.com/s/1dDP5Kqd
- MVC WebAPI 三层分布式框架开发
版权声明:本文为博主原创文章,未经博主允许不得转载. 前言:SOA(面向服务的架构)是目前企业应用开发过程中普遍采用的技术,基于MVC WebAPI三层分布式框架开发,以此适用于企业信息系统的业务处理 ...
- nodejs学习笔记(1)--express安装问题:express不是内部也或者外部的命令解决方案
"Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.使用 Express 可以快速地搭建一个完 ...
- JNA 如何 加载多个 存在依赖的 DLL 库
JNA 的出现,极大的简化了原有的 JNI 技术.下面是JNA github地址:https://github.com/java-native-access/jna 1. 简单的一个例子: /** S ...
- LeetCode#227.Basic Calculator II
题目 Implement a basic calculator to evaluate a simple expression string. The expression string contai ...
- 通过vmstat命令判断服务器瓶颈
linux命令vmstat介绍 vmstat介绍 通过STATSPACK收集服务器信息,主要通过收集VMSTAT的信息来展现服务器状况.VMSTAT工具是最常见的UNIX监控工具,可以展现给定时 间间 ...
- linux /proc/sys/fs/file-nr /proc/sys/fs/file-max /etc/security/limits.conf 三者的关联
ulimit -n 对应 /etc/security/limits.conf 文件设置 问题: Can’t open so many files 对于linux运维的同学们,相信都遇到过这个问题. 在 ...