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高级程序设计》

时间: 2024-08-08 01:13:08

AngularJS中的控制器和作用域的相关文章

AngularJS中的控制器示例_2

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module('myApp'

AngularJS中的控制器示例_3

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> var myModule = angular

AngularJS中的控制器示例

<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Users\\yuli\\Desktop\\bower_components\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module('myApp'

angularJS中如何写控制器

angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新的$scope给这个控制器 控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中.尽可能地精简控制器是很好的做法 控制器并不适合用来执行DOM操作.格式化或数据操作,以及除存储数据模型之外的状态维护操作,它只是视图和$scope之间的桥梁. demo.html <!doctype html

AngularJS入门基础——控制器

AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作,格式化或数据操作,以及除存储数据模型之外的状态维护操作.它只是视图和$scope之间的桥梁. AngularJS应用的任何的一个部分,无论它渲染在哪个上下文,都有父级作用域存在.对ng-app所处的层级来讲,它的父级作用域就是$rootScope. 有一个例外,在指

转帖:AngularJS中的数据绑定 post

原文作者:zhangzhaoaaa http://zhangzhaoaaa.iteye.com/blog/2185376 AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的.      ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响.

黄聪:AngularJS中的$resource使用与Restful资源交互(转)

原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Re

使用控制器和作用域

一.组织控制器 1.1 使用一个单块控制器 1.2 复用控制器 你可以在同一个应用程序中创建多个视图并复用同一个控制器.AngularJS将会调用每个应用到控制器的工厂函数,结果是每个控制器实例将会拥有自己的作用域. 1)作用域之间的通信 作用域实际上是以层级结构的形式组织起来的,顶层是根作用域(rootScope),每个控制器都会被赋予一个新的作用域,该作用域是根作用域的一个子作用域.根作用域提供了在各个作用域之间发送事件的方法,这暗示着允许在各个控制器之间进行通信. 所有的作用域,包括$ro

AngularJS开发指南12:作用域

什么是作用域? 作用域是一个指向应用模型的对象.它是表达式的执行环境.作用域有层次结构,这个层次和相应的DOM几乎是一样的.作用域能监控表达式和传递事件. 作用域特点 作用域提供APIs($watch)来观察模型的变化. 作用域提供APIs($apply)将任何模型的改变从"AngularJS领域( Angular realm)"通过系统映射到视图上. 作用域能通过共享模型成员的方式嵌套到应用组件上.一个作用域从父作用域继承属性. 作用域提供表达式执行的上下文.比如说表达式{{user