AngularJS - Я не понимаю, как работает `фабрика`

Question

Я получил эту службу, где я поместил весь свой http-запрос относительно извлечения, удаления и добавления задачи. Удаление и извлечение задачи работают правильно, но когда я добавляю задачу или выполняю обновление существующей задачи, изменение задачи не будет отображаться визуально. Мне нужно обновить браузер.

Я просто не понимаю, как я не могу заставить себя добавить задачу. Если кто-то может помочь мне с моим кодом, я был бы очень благодарен.

я сделал GIF, где я демонстрирую свою проблему, когда в этом примере я уточняю задачу (https://www.dropbox.com/s/qndkfmxde6fos9r/hiI1hBNvSn.gif?dl=0)

Часть моего app.js кода:

zazzleApp.factory('TaskService', function ($http) { 
     var TaskService = {}; 

    TaskService.taskList = []; 

    TaskService.addTask = function(pTask){ 
     var newClickDate = clickDate; 
     console.log('LOGGGING NEW CLICK DATE = ', clickDate); 

     var newEditId = editId; 
     console.log('LOGGGING NEW edit id = ', newEditId); 
     var url; 

     console.log('edit id = ' , newEditId); 

     if (newEditId) { 
      url = 'api/task/update/' + newEditId; 
     } else { 
      url = 'api/task/create'; 
     } 

     console.log("URL URL USA", url, newEditId); 

     defaultStart = new Date(newClickDate); 
     defaultStart = defaultStart.getFullYear() + "-" + (defaultStart.getMonth() + 1) + "-" + defaultStart.getDate(); 
     defaultStart += " 00:00:00"; 

     defaultEnd = new Date(newClickDate).addDays(1); 
     defaultEnd = defaultEnd.getFullYear() + "-" + (defaultEnd.getMonth() + 1) + "-" + defaultEnd.getDate(); 
     defaultEnd += " 00:00:00"; 

     console.log('LOGGING DEFAULT START AND DEFAULT END ' , defaultStart, defaultEnd); 

     pTask.color = $('#containerColorPicker').attr('ng-data-id'); 

     return $http.post(url, { 
      'name': pTask.project_name, 
      'project_id': pTask.project_type, 
      'location_id': pTask.location, 
      'estimate_time': pTask.estimate_time || 2, 
      'project_client_name': pTask.project_client_name, 
      'url': pTask.url, 
      'resource_link': pTask.resource_link, 
      'notes': pTask.notes, 
      'start_time': pTask.start_time || defaultStart, 
      'end_time': pTask.end_time || defaultEnd, 
      /*'start_time': defaultStart, 
      'end_time': defaultEnd,*/ 
      'color': pTask.color 
     }, { 
      headers: { 
       "Content-Type": "text/plain" 
      } 
     }) 
     .success(function(data, status, headers, config) { 
       console.log(data); 
       TaskService.taskList.push(data);//pushing the new task 
       console.log("YYYYYYYYYYYYY -------->>>>>", defaultStart, newClickDate, newEditId); 
     }) 
     .error(function(data, status, headers, config) { 
      console.log("Failed to add the task to DB"); 
     }); 
    }; 

    return TaskService; 
}) 

//START CONTROLLER 
angular.module('zazzleToolPlannerApp') 
    .controller('CalendarCtrl', function ($scope, $mdDialog, $http, $rootScope, $timeout, User, Auth, UserService, TaskService) { 
     $scope.isAdmin = Auth.isAdmin; 
     $scope.getCurrentUser = Auth.getCurrentUser; 

     $scope.activeUser = $scope.getCurrentUser()._id; 
     //console.log('???????????? logging active/current user id', $scope.activeUser); 

     $scope.newTask = {}; 
     $scope.newTask.project_name = ""; 
     $scope.newTask.project_type = ""; 
     $scope.newTask.location = ""; 
     $scope.newTask.estimate_time = ""; 
     $scope.newTask.project_client_name = ""; 
     $scope.newTask.url = ""; 
     $scope.newTask.resource_link = ""; 
     $scope.newTask.notes = ""; 
     $scope.newTask.color = ""; 
     //console.log('00000000000 ', $scope.newTask); //empty 

     $scope.tasks = TaskService.taskList; 

     $scope.addTaskWithService = function() { 
      //note that you can process the promise right here (because of the return $http in the service) 
      TaskService.addTask($scope.newTask) 
       .success(function(data){ 
        //here you can process the data or format it or do whatever you want with it 
        console.log("Controller: the task has been added"); 
        $scope.tasks = [];// EMPTY THE ARRAY 
        TaskService.getTasks(); 
        $scope.updateGridDataAwesome(); 
        $scope.updateGridData(); 

        //console.log('Taskservice Controller ', $scope.updateGridDataAwesome); 
       }) 
       .error(function(data){ 
        //something went wrong 
        console.log("Controller: error in adding task"); 
       });   
     } 

}); 
//END CONTROLLER 

Answer 1

В succes() обратного вызова TaskService.addTask вы присваиваете пустой экземпляр массива $scope.tasks, тем самым нарушая ссылку на TaskService.taskList. Поэтому вызов TaskService.getTasks() больше не будет влиять на переменную области видимости.