javascript - 我如何使用涉及 Controller 中的一种方法和另一种方法中的 promise ？

Question

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

为了使新项目出现在侧边栏上而不必刷新页面，我创建了一个超时函数，因为如果我同时调用“postProject”和“loadProjects”，它将不起作用。

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

这段代码可以工作，但我想让它感觉不对。我想让它正确，并且我认为我应该为此使用 promise 调用。我面临的问题是，被调用的第一个函数(addProject)位于“添加新项目”自定义指令的 Controller 内，第二个函数位于 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.controller”中注入(inject)“app.directive”，这样我就可以在 Controller 中使用addProject，就像我注入(inject)“IlcamService”来使用“loadAll”一样，但 Angular 似乎并不允许我在 Controller 内注入(inject)指令。这是有道理的，因为我实际上想要该指令内的 Controller ，而不是整个指令，但我不知道如何在不移动的情况下做到这一点指令文件外部的 Controller 。

Answer 1

创建一个负责发出请求的服务，该服务将有一个返回 promise 的方法。在 Controller 内部注入(inject)服务并调用发出请求的方法，当 promise 解析时调用 loadProjects 方法。像这样的东西:

服务

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

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

  return{
     postProjects: _postProjects
  }

});

Controller

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

指令

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

  };
});