AngularJs 功能(四)--控制器

发布时间:2019-07-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了AngularJs 功能(四)--控制器脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

控制器

控制器Controller是Angular应用三大组成部分之一。

说一说我对Angular控制器的理解:
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
AngularJS 使用$scoPE 对象来调用控制器。
AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

明确创建一个$scope 对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性:

<div ng-controller="MyController"> {{ person.name }} </div>  

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象,并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里,这个外层DOM元素的$scope 对象,就是$rootScope 对象。

scope对象初始化
通常情况下,你创建一个angular应用时,你需要先设置scope的初始状态。你需要为scope设置一些属性,包含在view中预先声明的model,所有$scope的属性在controller注册的DOM里都是可用的。

给scope对象增加一些行为
为了响应一些事件或者在view中进行一些计算,我们必须为$scope增加一些行为。我们通过为$scope对象增加方法的方式为他增加行为,这些方法可以被template/view调用。

下面的示例演示如何为controller增加方法

angular.module('myApp'[]).controller('DoubleController', ['$scope', function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

controller一旦被添加到DOM中,该方法就可以在template中被调用

<div ng-controller="DoubleController">
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>

要注意以下几点:

ng-controller directive 隐式地为template创建了一个scope,这个scope又被SpicyController controller管理。
仅仅是一个简单的javascript函数。命名规范是大写字母开头,以Controller结束。
为scope分配一个属性去创建和更新model
controller的方法可以通过直接赋值的方式创建
controller的方法或者属性在template中是可用的

所有scope都遵循原型继承(PRototypal inheritance),这意味着它们都能访问父scope们。对任何属性和方法,如果AngularJS在当前scope上找不到,就会到父 scope上去找,如果在父scope上也没找到,就会继续向上回溯,一直到$rootScope 上。

唯一的例外:有些指令属性可以选择性地创建一个独立的scope,让这个scope不继承它的父scope们,这个会在指令详解中说明。

脚本宝典总结

以上是脚本宝典为你收集整理的AngularJs 功能(四)--控制器全部内容,希望文章能够帮你解决AngularJs 功能(四)--控制器所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。