AngularJs(四)控制器

AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。

之前的章节中说到,控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。那么到底应该怎么去使用它?

控制器应该尽可能保持短小精悍,而在控制器中进行DOM操作和数据操作则是一个不好的

实践。

例如,下面这个例子中的控制器包含了过于臃肿的逻辑用于控制视图,并且还操作了DOM。

臃肿的控制器:

angular.module('myApp', [ ])
.controller('MyController', function($scope) {
$scope.shouldShowLogin = true;
$scope.showLogin = function () {
$scope.shouldShowLogin =!$scope.shouldShowLogin;
};
$scope.clickButton = function() {
$('#btn span').html('Clicked');
};
$scope.onLogin = function(user) {
$http({
method: 'POST',
url: '/login',
data: {
user: user
}
}).success(function(data) {
// user
});
};
});


设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务,我们可以将控制器重构成一个轻量且更易维护的形式:

简洁的控制器:

angular.module('myApp',[ ])
.controller('MyController',function($scope,UserSrv) {
// 内容可以被指令控制
$scope.onLogin = function(user) {
UserSrv.runLogin(user);
};
});


阅读更多
文章标签: angularjs 框架
个人分类: AngularJs
上一篇AngularJs(三)作用域
下一篇AngularJs(五)指令
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭