AngularJS – 从服务调用控制器功能
|
我在Angular是如此的绿色,我甚至不确定我已经正确地构造了一个搜索.整个指令和服务术语仍然让我感到困惑,但这不是我的问题.
我已经阅读了这本优秀的文章系列：http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html 这是为什么我在这个时候在我的申请.为什么我知道我的问题更多地涉及服务和控制器之间的关系.而不是语法相关. 所以这里是应用程序的概述： 我有一个控制器这样就可以让用户使用AJAX调用PHP文件获取一堆农场数据,并使用自己的$scope显示在屏幕上. var masterApp = angular.module('masterApp',['myFilters','commonControls']);
masterApp.controller('MasterCtrl',['$scope','$http','$filter','commonFarmSelector',function($scope,$http,$filter,commonFarmSelector){
...
$scope.masterCtrl.loadFarmData = function(farmId) {
var postdata = {
"farmId":farmId
};
$http.post('/service/farmproduction',postdata).success(function (data) {
// Do stuff with the $scope using data
}
}
$scope.masterCtrl.loadFarms();
}
你会看到我正在注入一些名为“commonControls”的东西.这是我创建的一个模块,用于控制将被多个控制器重用的控件.在这种情况下,一个下拉字段包含用户可以访问的农场列表(也可以通过AJAX调用获得)： var commonControlsApp = angular.module('commonControls',[]);
commonControlsApp.controller('farmSelectorCtrl',$http) {
$scope.farmSelectorCtrl ={}
// Change entire farm view when a different farm is selected
$scope.farmSelectorCtrl.switchUserFarm = function() {
var farmId = $scope.farmSelectorCtrl.selectedUserFarm;
$scope.masterCtrl.loadFarms(farmId); // !!! Direct link to masterCtrl
};
// Get a list of the user's farms
$http.post('/service/userfarms').success(function (data) {
$scope.farmSelectorCtrl.userFarms = data.getFarmsPerUserResult.farmIds;
});
}]);
这工作正常但是您可以看到,farmSelector直接链接到masterCtrl.并且该loadFarmData函数的行为特定于该控制器.换句话说,它只会做适用于该页面的事情. 事情是,这个farmSelector将在其他页面上使用.每个页面的更改事件的精确行为将不同.所以我正在努力解决这个行为应该坐在哪里.而且它将如何调用依赖于使用farmSelector的控制器. 我在上面链接的文章表明,这个farmSelector应该是一个服务,所以它可以在其他地方重用.但是,我仍然感到困惑的是如何在一个事件被触发时给一个通用的服务一个具体的动作.
我强烈推荐一个服务,同样的原因,文章建议.它也有一个很好的答案,你的问题.
你想要的技术术语是一个回退函数.正是在触发事件时采取的具体措施,文章的“服务”部分提供了一个很好的例子. 看看服务文章的这一部分(我已经修剪到重要的部分) angular.module('myApp.services',[])
.factory('githubService',['$http',function($http) {
var doRequest = function(username) {
return $http({
url: 'https://MySuperURL.com/getTheData'
});
}
return {
events: doRequest
};
}]);
所以我们现在有一个名为githubService的服务,它有一种方法：事件(这个doRequest真的只是一个不同的名字,我保留了重命名,以便与文章的代码相匹配). 隐藏在幕后的是$q API,有时被称为“promise”API.函数$http返回一个’promise’对象,这真的只是代码跟踪当“承诺”完成时应该发生什么的一种方式.例如,我们来看下面的代码(再次从文章的版本修改)： app.controller('ServiceController','githubService',githubService) {
// uses the $http service to call the GitHub API
// and returns the resulting promise
githubService.events(newUsername)
.success(function(data,status,headers) {
// do magic stuff with the result
// (which is in the data param)
$scope.events = data.data;
})
});
}]); 这是“魔术”发生的地方.看看对success()的调用,你会看到它们实际上是传递一个在请求工作时应该运行的函数.由于关闭,该函数仍然可以访问ServiceController中的所有变量,因此允许使用$scope和其他变量.然而,通过每次传递一个不同的函数,每个控制器都可以写一个不同的success()方法,这样可以让多个控制器采取不同的操作.当请求完成时,它将调用它给出的每个成功函数. 你可以遵循这个代码示例并获得一个工作模型,但是我也建议你看看$q in angular,还可以看看这篇关于callback functions的文章.你需要了解这两个方面真的会发生什么,但是很好消息是,他们都经常使用角度,所以这将是值得你的时间. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |