控制器

1.0  在模板中声明控制器

在一个HTML元素上使用ng-controller指令,就可以引入一个控制器对象:

...

控制器的实现

控制器实际上就是一个JavaScript的类/构造函数

//控制器类定义

var myControllerClass=function($scope){

//模型属性定义

$scope.text="...";

//模型方法定义

$scope.do=function(){...};

};

//在模块中注册控制器

angular.module('someModule',[])

.controller("myController",myControllerClass);

控制器的一次性

控制器构造函数仅在AngularJS对HTML文档进行编译时被执行一次。从这个角度看, 就更容易理解为何将控制器称为对scope对象的增强:一旦控制器创建完毕,就意味着scope对 象上的业务模型构造完毕,此后就不再需要控制器了- scope对象接管了一切。




2.0   控制器对scope的影响

ng-controller指令总是创建一个新的scope对象:

控制器_第1张图片

在图中,我们看到:

ng-app指令引发$rootScope对象的创建。开始时,它是一个空对象

body元素对应的scope对象还是$rootScope。ng-init指令将sb对象挂在了$rootScope上。

div元素通过ng-controller指令创建了一个新的scope对象,这个对象的原型是$rootScope。

因为原型继承的关系,在do函数中对sb的引用指向$rootScope.sb



3.0    向cope对象添加方法

业务模型是动态的,在数据之外,我们需要给业务模型添加动作。

在之前建立的业务模型上,我们增加一个随机挑选的方法:shuffle,这个方法负责 从一个小型的名人库中随机的选择一个名人来更新模型的sb属性:

控制器_第2张图片

通过在button上使用ng-click指令,我们将模型的shuffle方法绑定到了鼠标点击 事件上。试着用鼠标点击【shuffle】按钮,我们的模型将从库里随机的选出一个 名人,显示在视图里。

示例代码参见→_→。




4.0    别把任何代码都塞到控制器里!

控制器_第3张图片

控制器的设计出发点是封装单个视图的业务逻辑,因此,不要进行以下操作:

DOM操作

应当将DOM操作使用指令/directive进行封装。

变换输出形式

应当使用过滤器/filter对输出显示进行转化。

跨控制器共享代码

对于需要复用的基础代码,应当使用服务/service进行封装

你可能感兴趣的:(控制器)