添加或刪除數據后，角度頁面不刷新

Question

我的角度應用程序經常出現問題，無法在添加，編輯或刪除數據后刷新頁面。 因此，如果我將新項目添加到主題列表中，則除非我離開頁面然后返回到該頁面，否則新項目不會出現在列表中。 我嘗試使用route.reload，然后重新設置以下主題列表的范圍。 我放了一個警報，看它是否被觸發了，但是警報出現在頁面重定向回到主題列表之前，這很奇怪，因為$ location.path（'/ subjects'）在它的前兩行。 這是我的控制器：

angular.module('myApp.controllers')
    .controller('SubjectEditCtrl', ['$scope', '$routeParams', 'SubjectFactory', 'SubjectsFactory', '$location', '$route',
    function ($scope, $routeParams, SubjectFactory, SubjectsFactory, $location, $route) {

    // callback for ng-click 'updateSubject':

    $scope.updateSubject = function () {

//Performs an update to the server
        SubjectFactory.update($scope.subject);
//Redirects to list of all subjects
        $location.path('/subjects/');
//Should reset the scope of the subject list
        $scope.subjects = SubjectsFactory.query();
//Should reload the page
        $route.reload();
//For debugging- the alert appears BEFORE the redirect to list of all subjects happens
        alert('route reload happening');
    };


    SubjectFactory.show({id: $routeParams.subjectId}).$promise.then(function(subject) {
        $scope.subject = subject;
    }, function(err) {
        console.error(err);
    });


}]);

誰能提出解決方案？

編輯：主題服務

var app = angular.module('myApp.services');

app.factory('SubjectsFactory', function ($resource) {
    return $resource('https://myapiurl.com/subjects', {}, {
        query: { method: 'GET', isArray: true },
        create: { method: 'POST' }
    })
});

app.factory('SubjectFactory', function ($resource) {
    return $resource('https://myapiurl.com/subjects/:id', {}, {
        show: { method: 'GET', isArray: false },
        update: { method: 'PATCH', params: {id: '@id'} },
        delete: { method: 'DELETE', params: {id: '@id'} }
    })
});

Answer 1

有時您需要將更改應用於范圍，這是通過以下代碼完成的：

$scope.$apply();

但這只有在未處於“ $ digest”階段時才能完成，否則它將引發異常。 因此，您需要首先檢查它是否不在“ $ digest”階段，然后才能應用它。 這是我用於安全應用更改的代碼示例：

safeApply: function (scope, callback) {
   if (scope.$$phase != '$apply' && scope.$$phase != '$digest' &&
        (!scope.$root || (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest'))) {
        scope.$apply();
    }
    if (angular.isFunction(callback)) {
        callback();
    }
}

Answer 2

我可以建議另一種方法：

添加后，您無法從數據庫中獲取數據，可以輕松地將新添加的對象推入$scope.items 。

例：

 $scope.add = function (newItem) {
        DataService.addItem(newItem).then(function(){
           $scope.items.push(newItem);
           //or for removing
           //$scope.items.splice($scope.items.indexOf(newItem), 1);
        });
    };

並調整您的工廠：

   addItem: function (newProject) {
        $http.post('Api/Controller/Post').then(function(successResult){ 
             ...
        }, function (errorResult) {
           ...
        });
    }

僅在成功調用服務器端方法后，項才會添加到$scope.items 。

Answer 3

更改請求的結構會稍微解決問題-因此而不是

$scope.updateSubject = function () {
    SubjectFactory.update($scope.subject);
    $location.path('/subjects/');
    $scope.subjects = SubjectsFactory.query();
    $route.reload();
};

就是現在

$scope.updateSubject = function () {
                SubjectFactory.update($scope.subject).$promise.then(function (subject) {
                    $scope.subject = subject;
                    $location.path('/subjects/');
                    $route.reload();
                }, function (err) {
                    console.error(err);
                });
            };