AngularJS中的控制器和作用域

时间:2022-09-10 17:44:34

欢迎大家指导与讨论 : )

  一、 作用域的事件传播

    一 . 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中的控制器和作用域的更多相关文章

  1. AngularJS中的控制器示例&lowbar;3

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  2. AngularJS中的控制器示例&lowbar;2

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  3. AngularJS中的控制器示例

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  4. angularJS中如何写控制器

    angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新 ...

  5. 理解angularJS中作用域&dollar;scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  6. angularjs 控制器、作用域、广播详解

    一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...

  7. AngularJS中控制器继承

    本篇关注AngularJS中的控制器继承,了解属性和方法是如何被继承的. 嵌套控制器中属性是如何被继承的? ==属性值是字符串 myApp.controller("ParentCtrl&qu ...

  8. AngularJS入门基础——控制器

    AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是, ...

  9. angularJS中控制器和作用范围

    $scope是$rootScope的子作用域控制对象,$rootScope的id为1,其他的为2,3,4... 不同的控制器之间,所对应的作用域控制对象$scope,之间是相互隔离的,如果要共享数据, ...

随机推荐

  1. Objective-C runtime的常见应用

    用Objective-C等面向对象语言编程时,"对象"(object)就是"基本构造单元"(building block).开发者可以通过对象来存储并传递数据. ...

  2. java 多线程--- Thread Runnable Executors

    java 实现多线程的整理: Thread实现多线程的两种方式: (1)继承 Thread类,同时重载 run 方法: class PrimeThread extends Thread { long ...

  3. 【HDU 5835】Danganronpa(分配礼物)

    10种礼物,每种有ai个,每个小朋友分两个礼物,其中普通礼物要求相邻两人的不能一样,求最多分给几个小朋友. sum/2是最多的情况.什么时候发不了那么多,就是当max很大,无论怎么发,都发不完max. ...

  4. iOS开发笔记1:ToDoList、相册、地图应用及新浪微博

    前段时间做了一些小东西,一些关键点记录总结如下 1.ToDoList 主要是使用UITableView以及NSUserDefaults完成任务管理,可新建.编辑及删除任务. 因为是Demo性质,所以利 ...

  5. 黄聪:走进wordpress 详细说说template-loader&period;php

    再看template-laoder.php,这个文件总共只有45行.它的作用是基于访问的URL装载正确的模板. 文件第六行,也是第一条语句,如下: if ( defined('WP_USE_THEME ...

  6. 软件测试 homework1

    申明数组变量后,在使用的时候,出现了向上溢出的情况(程序运行过程中出现的),导致最后答案不正确,经过输出数组数据发现错误, 现在在申明数组的时候都会大致估算一下,确认申明什么样的数组不会导致溢出. 在 ...

  7. java中不常见的keyword:strictfp,transient

    1.strictfp, 即 strict float point (精确浮点). strictfp keyword可应用于类.接口或方法.使用 strictfp keyword声明一个方法时,该方法中 ...

  8. codeforces 645C &period; Enduring Exodus 三分

    题目链接 我们将所有为0的位置的下标存起来. 然后我们枚举左端点i, 那么i+k就是右端点. 然后我们三分John的位置, 找到下标为i时的最小值. 复杂度 $ O(nlogn) $ #include ...

  9. Linux内核源代码解析之——我与神童聊Linux内核

    本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/11619609 我的朋友里,至少有2.5个神童. 有的 ...

  10. VR全景智慧城市-提前进入商家观景,涵盖实体行业

    互联网发展的迅猛势头,让很多的实体商家翻了个大跟头,更有言说,未来的大街小巷根本见不到逛街的人,可是线上商城相继曝出的假货谁来买单?相比之下眼见为实更让消费者心里觉得踏实.所以,全景智慧城市更能满足大 ...