Question

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

要使新项目显示在侧栏上而不必刷新页面我做了超时功能，因为如果我同时调用“postProject”和“loadProjects”它将无效。

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

此代码有效，但我想让它感觉不对。我想做对，我想我应该使用一个承诺电话。我面临的问题是被调用的第一个函数（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”中注入“app.directive”，所以我可以在控制器中使用addProject，就像我注入“IlcamService”来使用“loadAll”但角度似乎没有允许我在控制器中注入指令。这是有道理的，因为我实际上想要指令中的控制器，而不是整个指令，但我不知道怎么做而不移动指令文件外的控制器。

Answer 1

创建一个负责发出请求的服务，该服务将有一个返回promise的方法。在promise中解析服务并调用发出请求的方法，当promise解析后调用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() 
                     )
    }

  };
});

我如何使用涉及控制器中的一种方法和另一种方法的承诺？

1 个答案: