AngularJS 控制器 Live Dom
控制器的作用是在$scope对象上创建属性和方法,控制器的作用域是$scope,所以作用域是针对控制器来讲的。另外,控制器实例不是单例,每次都会重新实例化,不像服务是单例的。
其是注册在模块上的,如
angular.module('com.ngnice.app').controller('UserListCtrl', function($scope){});
即在模块com.ngnice.app上以名字UserListCtrl注册一个函数function,以便需要时候可以找到它。通常我们用在路由或指令中。
$stateProvider.state('user.list',{
url:'/list',
templateUrl:'views/user/list.html',
controller:'UserListCtrl'
});
当用户访问/user/list这个URL的时候,angular-ui-router插件就会实例化一个名为UserListCtrl的控制器,同时创建一个$scope对象,这个控制器实例会在$scope对象上创建属性和方法等,这个过程称为“初始化Scope对象”,之后,加载模板,并把$scope对象传入,模板中会通过指令绑定这些属性和方法,并通过一个摘要循环(digest cycle)的过程,自动维护scope变量 和视图中的DOM节点的一致性,这个时候DOM称为“活DOM(Live DOM)”.
指令中使用控制器也一样,也会创建一个$scope,知道控制器,并初始化$scope,最后把scope绑定到视图,把生成的Live DOM渲染出来。
Live DOM:即把静态的DOM和$scope绑定在一起,此过程被称为编译(complie),$compile函数是它们绑定在一起的关键。如
$compile('<ul><li ng-repeat=.....></li></ul>')(subScope);
注意:
控制器永远都不应该去操作DOM,或是持有DOM选择器,那是我们需要使用指令和ng-model的地方。同样的,业务逻辑应该存在于服务中,而非控制器。
另外,注入服务的方式,可以是显示或隐式方式
angular.module('com.ngnice.app').controller('UserListCtrl', function($scope){});隐式方式,必须制定$scope,不能少了$
angular.module('com.ngnice.app').controller('UserListCtrl', ['$scope',function(scopeObject){}]);显式方式,必须制定$scope,scopeObject相当于形参,可以任意制定。
而且可知,$scope也是个注入的服务,是单例,而scopeObject是创建的对象。
AngularJS 控制器 Live Dom的更多相关文章
- AngularJS 1.x系列:AngularJS控制器(3)
1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...
- AngularJS控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...
- AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制 ...
- AngularJS 控制器 ng-controller
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...
- angularjs控制器之间通信,事件通知服务
service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...
- AngularJS中的DOM与事件
前 言 AngularJS中的DOM与事件 AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled="true/false" ...
- AngularJS学习之旅—AngularJS 控制器(六)
1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...
- AngularJS控制器和AngularJS过滤器的学习(3)
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...
- AngularJS:HTML DOM
ylbtech-AngularJS:HTML DOM 1.返回顶部 1. AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-d ...
随机推荐
- iOS.PrototypeTools
1. iPhone/iPad 原型工具 http://giveabrief.com/ 2. proto.io https://proto.io/ 3. Origami http://facebook. ...
- Autel MaxiSys MS906TS tire pressure settings Lexus LS460h
Use AUTEL MaxiSYS MS906TS error reader to install tire pressure Lexus LS460h in Vung Tau. Make : Lex ...
- Java的OOP三大特征之一——继承
Java的OOP三大特征之一——继承 子类继承父类的特征和行为(属性和方法),使得子类具有父类的各种属性和方法.或子类从父类继承方法,使得子类具有父类相同的行为. 特点:在继承关系中,父类更通用.子类 ...
- P1083龙舟比赛
题目如下: 现在正在举行龙舟比赛,我们现在获得了最后冲刺时的俯视图像,现在你要输出各条龙舟的名次. 这张图像由r行c列的字符组成,每行的最左边的字符表示起点,所以字符为'S',最右边的字符为'F'.并 ...
- 高级设计总监的设计方法论——5W1H需求分析法 KANO模型分析法
本期开始进入设计方法论的学习,大湿自己也是边学边分享,算是巩固一遍吧: 另外这些理论基本都是交叉结合来应用于工作中,我们学习理论但不要拘泥于理论的框架中,掌握后要灵活运用一点- 这些理论一部分来自于我 ...
- js 光标位置处理
/** * 获取选中文字 * 返回selection,toString可拿到结果,selection含有起始光标位置信息等 **/ function getSelectText() { var tex ...
- json ubuntu下安装
1.首先安装scons scons是linux下的自动构建工具,类似cmake. 下载地址wget http://prdownloads.sourceforge.net/scons/scons-2.2 ...
- Sharing Code Between Silverlight and Win8 app metro
这里讲得很详细了: Sharing Code between Windows Phone 8 and Windows 8 Applications http://msdn.microsoft.com/ ...
- CSS-弹性布局-伪类选择器-复杂选择器
1.定位 1.堆叠顺序 一旦将元素变为已定位元素的话,元素们则有可能出现堆叠的效果. 如何改变堆叠顺序? 属性:z-index 取值:无单位的数字,数字越大越靠上. 注意: 1.父子元素间,z-ind ...
- RAID : 独立磁盘冗余阵列(Redundant Array of Independent Disks)
RAID 分为不用的等级(RAID0 - RAID5),以满足不同的数据应用需求. RAID 是由多个独立的高性能磁盘驱动器组成的磁盘子系统,从而提供比单个磁盘更高的存储性能和数据冗余的技术. AID ...