[英]How can I use promise that involves one method from controller and one from another?
I am using angularJS. 我正在使用angularJS。 Right now I have a function that creates a "new project" (an object) which sends it to the server. 现在,我有一个函数可以创建一个“新项目”(一个对象)并将其发送到服务器。 The sidebar is populated with a list of projects that it gets from the server. 侧栏填充有从服务器获取的项目列表。 Each time the page is reloaded is calls a function "loadProjects" and it generates the list. 每次重新加载页面时,都会调用函数“ loadProjects”并生成列表。
To make a new project appear on the sidebar without having to refresh the page I made a timeout function because if I call both the "postProject" and "loadProjects" it would not work. 为了使新项目出现在边栏上而不必刷新页面,我设置了超时功能,因为如果同时调用“ postProject”和“ loadProjects”,它将无法正常工作。
function RefreshSidebar() {
setTimeout(loadProjects, 200);
}
This code works but I want to make it doesn't feel right. 这段代码有效,但是我想让它感觉不正确。 I want to make it right and I think I should be using a promise call for this. 我想做对了,我认为我应该对此作出承诺。 The problem that I am facing is that the first function being called (addProject) is inside a Controller for the "Add new Project" custom directive and the second one is inside the mainController. 我面临的问题是被调用的第一个函数(addProject)在“添加新项目”自定义指令的控制器内,而第二个函数在mainController内。
This is my app.directive.js: 这是我的app.directive.js:
(function() {
angular
.module("app.directive", [])
.directive("createProject", CreateProjDirective)
.directive("viewProject", ViewProjDirective);
function ViewProjDirective() {
return {
restrict: "EA",
templateUrl: "directives/project_view.html"
};
}
function CreateProjDirective() {
return {
restrict: "EA",
controller: CreateController,
controllerAs: "proj",
templateUrl: "directives/create_project.html"
};
}
function CreateController($scope, $http, $timeout) {
var proj = this;
var counter = 001;
proj.id = "ProjectTest_"+counter
proj.uuid = "";
proj.customer = "";
proj.socket = "";
proj.drawing = "";
proj.programmer = "";
proj.createdOn = new Date();
proj.revision = "";
proj.protocol = "";
proj.targetMachineId = "";
$scope.posttest = "";
proj.addProject = function(){
var dataProj = {
"Description": {
ProjectID: proj.id,
UUID: proj.uuid,
Customer: proj.customer,
Socket: proj.socket,
Drawing: proj.drawing,
Programmer: proj.programmer,
CreatedOn: proj.createdOn,
Revision: proj.revision,
ProtocolFileSchema: proj.protocol,
TargetMachineID: proj.targetMachineId
}
};
var request = $http.post('http://localhost:9001/api/projects/', dataProj) ;
request.success(function(data, status, headers, config) {
console.log(data);
$scope.message = data;
});
request.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
//reset the form
counter = counter + 1;
proj.id = "ProjectTest_"+counter;
proj.uuid = "";
proj.customer = "";
proj.socket = "";
proj.drawing = "";
proj.programmer = "";
proj.createdOn = new Date();
proj.revision = "";
proj.protocol = "";
proj.targetMachineId = "";
$scope.posttest = "";
}
};
})();
And this is my app.controller.js (I think the only relevant functions here is loadProjects()
and refreshSidebar()
这是我的app.controller.js(我认为这里唯一相关的功能是loadProjects()
和refreshSidebar()
(function() {
angular
.module("app.controller", [])
.controller('AppCtrl', MainController);
MainController.$inject = ['$scope', '$mdSidenav', 'ilcamService', '$timeout','$log', "$http"];
function MainController($scope, $mdSidenav, ilcamService, $timeout, $log, $http) {
var allProjects = [];
//com directive-controller $scope.$on("testEvent", function(event, data) { $scope.test = data; console.log(data); });
$scope.create = false;
$scope.selected = null;
$scope.projects = allProjects;
$scope.selectProject = selectProject;
$scope.toggleSidenav = toggleSidenav;
$scope.refreshSidebar = refreshSidebar;
$scope.putProject = putProject;
loadProjects();
function loadProjects() {
ilcamService.loadAll()
.then(function(projects){
allProjects = projects;
console.log(projects);
$scope.projects = [].concat(projects);
$scope.selected = $scope.projects[0];
})
}
function toggleSidenav(name) {
$mdSidenav(name).toggle();
}
function selectProject(project) {
$scope.selected = angular.isNumber(project) ? $scope.projects[project] : project;
$scope.toggleSidenav('left');
$scope.create = 0;
}
function refreshSidebar() {
setTimeout(loadProjects, 200);
}
})();
My first idea was to inject the "app.directive" inside the "app.controller" so I could use addProject inside the controller, just like I injected "IlcamService" to use the "loadAll" but angular don't seem to allow me to inject a directive inside a controller. 我的第一个想法是将“ app.directive”注入“ app.controller”内部,因此我可以在控制器内部使用addProject,就像我注入“ IlcamService”以使用“ loadAll”一样,但是角度似乎不允许我在控制器内部注入指令 。 That makes sense because I actually want the controller that is inside that directive , not the entire directive but I dont know how to do that without moving the controller outside the directive file. 这是有道理的,因为我实际上希望控制器位于该指令内 ,而不是整个指令内,但我不知道如何在不将控制器移至指令文件外的情况下执行该操作。
Create a service that will be responsible to make the requests, this service will have a method that returns a promise. 创建一个将负责发出请求的服务,该服务将具有一个返回诺言的方法。 Inside your controller inject the service and call the method that make the requests, when the promise resolves call then loadProjects
method. 在控制器内部注入服务并调用发出请求的方法,当loadProjects
解析调用后,再调用loadProjects
方法。 Something like: 就像是:
Service 服务
app.service('LoadProjectsService', function($http){
_postProjects = function(){
return $http.post(...)
}
return{
postProjects: _postProjects
}
});
Controller 调节器
app.controller('YourController', ['LoadProjectsService', function(LoadProjectsService) {
LoadProjectsService.postProjects()
.success(
loadProjects()
)
}]);
Directive 指示
app.directive('LoadProjectsService', function(LoadProjectsService) {
return {
template: ...
link: function(){
LoadProjectsService.postProjects()
.success(
loadProjects()
)
}
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.