如何使用涉及控制器的一种方法和另一种方法的promise？

Question

我正在使用angularJS。 现在，我有一个函数可以创建一个“新项目”（一个对象）并将其发送到服务器。 侧栏填充有从服务器获取的项目列表。 每次重新加载页面时，都会调用函数“ loadProjects”并生成列表。

为了使新项目出现在边栏上而不必刷新页面，我设置了超时功能，因为如果同时调用“ postProject”和“ loadProjects”，它将无法正常工作。

  function RefreshSidebar() {
    setTimeout(loadProjects, 200);
  }

这段代码有效，但是我想让它感觉不正确。 我想做对了，我认为我应该对此作出承诺。 我面临的问题是被调用的第一个函数（addProject）在“添加新项目”自定义指令的控制器内，而第二个函数在mainController内。

这是我的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 = "";
      }

    };

})();

这是我的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);
      }

    })();

我的第一个想法是将“ app.directive”注入“ app.controller”内部，因此我可以在控制器内部使用addProject，就像我注入“ IlcamService”以使用“ loadAll”一样，但是角度似乎不允许我在控制器内部注入指令 。 这是有道理的，因为我实际上希望控制器位于该指令内 ，而不是整个指令内，但我不知道如何在不将控制器移至指令文件外的情况下执行该操作。

Answer 1

创建一个将负责发出请求的服务，该服务将具有一个返回诺言的方法。 在控制器内部注入服务并调用发出请求的方法，当loadProjects解析调用后，再调用loadProjects方法。 就像是：

服务

app.service('LoadProjectsService', function($http){

    _postProjects = function(){
       return $http.post(...)
    }

  return{
     postProjects: _postProjects
  }

});

调节器

app.controller('YourController', ['LoadProjectsService', function(LoadProjectsService) {
  LoadProjectsService.postProjects()
                     .success(
                       loadProjects() 
                     )
}]);

指示

app.directive('LoadProjectsService', function(LoadProjectsService) {
  return {
    template: ...
    link: function(){
      LoadProjectsService.postProjects()
                     .success(
                       loadProjects() 
                     )
    }

  };
});