How can I use promise that involves one method from controller and one from another?

Question

I am using 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.

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.

  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.

This is my 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()

    (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. 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.

Answer 1

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. 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() 
                     )
    }

  };
});