Question

我编写了一个服务来处理我的http请求，以检索，添加和删除任务。现在我面临的问题是，当我添加或删除任务时，更改不会直观显示。我必须刷新页面。

如何解决此问题。

我的角度代码（部分内容）：

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

    TaskService.taskList = [];

    TaskService.getTasks = function(){
        $http.get('api/task/all')
            .success(function(dataFromServer){

                for (var i = 0; i < dataFromServer.length; i++) {
                    TaskService.taskList[i] = dataFromServer[i];          
                };

                //console.log('LOGGING GET_TASK ',  TaskService.taskList);

                return dataFromServer;
            })
            .error(function(errorFromServer){
            //something went wrong, process the error here
                console.log("Error in getting the users from the server ", errorFromServer);
            })
    };

    TaskService.addTask = function(pTask){

        var url;

        console.log(editId);

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

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

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

        console.log("YYYYYYYYYYYYY -------->>>>>", defaultStart);

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

        console.log(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': defaultStart,
            /*'start_time': pTask.start_time || defaultStart,*/
            'end_time': pTask.end_time || defaultEnd,
            'color': pTask.color
        }, {
            headers: {
                "Content-Type": "text/plain"
            }
        })
        .success(function(data, status, headers, config) {
                console.log(data);
                TaskService.taskList.push(data);

        })
        .error(function(data, status, headers, config) {
            console.log("Failed to add the task to DB");
        });
    };

    TaskService.deleteTask = function (){

        if (editId) {
            //console.log('logging editId in service delete task ', editId);
        $http.delete('api/task/delete/' + editId, {

            })
            .success(function(data, status, headers, config) {

                for (var i = 0; i < TaskService.taskList.length; i++) {
                    if(TaskService.taskList[i]._id == editId){
                        //index = i;
                        console.log ("removing the element from the array, index: ", editId, i);
                        TaskService.taskList.splice(i,1);
                    }
                };
                console.log('taskArray ', TaskService.taskList, editId, i);
                $('#tile[ng-data-id="'+ editId +'"]').remove();
            })
            .error(function(data, status, headers, config) {
                console.log("You were NOT succesfull in deleting a task");
            });
        }

    };

    return TaskService;
})


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

        $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.getTasksFromService = function () {
            TaskService.getTasks(); //after this gets called, the data will be shown in the page automatically   
        }
        $scope.getTasksFromService();

        $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();
                })
                .error(function(data){
                    //something went wrong
                    console.log("Controller: error in adding task");
                });         
        }

        $scope.deleteTaskWithService = function(){
            TaskService.deleteTask();
        }

});
//END CONTROLLER

Answer 1

这个东西在你的代码中只调用一次：

$scope.tasks = TaskService.taskList;

您的TaskService.addTask函数通过执行以下操作将新任务推送到TaskService.taskList：

TaskService.taskList.push(data);

但它并没有在任何地方再次更新$ scope.tasks。

我的服务不会立即显示更改。必须刷新浏览器

1 个答案: