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);
                });
            };

添加或删除数据后，Angular页面不会刷新

3 个答案: