如何使用涉及控制器的一種方法和另一種方法的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() 
                     )
    }

  };
});