角页面数据后不刷新添加或删除 [英] Angular page doesn't refresh after data is added or removed

问题描述

我有我的角度应用一个反复出现的问题，从而实现了数据已经被添加后，编辑或删除它不刷新页面。所以，如果我添加一个新项目的主题列表，新项目没有出现在列表中，除非我从页面导航离开，然后回来吧。我已经使用route.reload然后复位以下科目列表的范围尝试。我把警报，看它是否得到fired-但页面重定向到的学科名单，这是奇怪，$ location.path（'/科'）之前是前两行出现的警告。这里是我的控制器：

  angular.module（'myApp.controllers'）
    .controller（'SubjectEditCtrl'，['$范围，$ routeParams'，'SubjectFactory'，'SubjectsFactory'，'$的位置，$路线'，
    功能（$范围，$ routeParams，SubjectFactory，SubjectsFactory，$位置$路线）{    //回调NG-点击updateSubject：    $ scope.updateSubject =功能（）{//执行一个更新到服务器
        SubjectFactory.update（$ scope.subject）;
//重定向到所有科目列表
        $ location.path（'/主题/'）;
//应该重置主题列表中的范围
        $ scope.subjects = SubjectsFactory.query（）;
//应该重新加载页面
        $ route.reload（）;
//对于debugging-警报出现前的重定向列出所有科目的发生
        警报（'路线重装发生的'）;
    };
    SubjectFactory.show（{ID：$ routeParams.subjectId}）$ promise.then（功能（主题）{
        $ scope.subject =主体;
    }，功能（错误）{
        console.error（ERR）;
    }）;
}]）;
 

任何人都可以提出一个解决方案？

编辑：主题服务

  VAR应用= angular.module（'myApp.services'）;app.factory（'SubjectsFactory'，函数（$资源）{
    返回$资源（'https://myapiurl.com/subjects'，{}，{
        查询：{方法：GET，IsArray的：真正}，
        创建：{方法：POST}
    }）
}）;app.factory（'SubjectFactory'，函数（$资源）{
    返回$资源（'https://myapiurl.com/subjects/:id'，{}，{
        显示：{方法：GET，IsArray的：假}，
        更新：{方法：PATCH，则params：{ID：'@id'}}，
        删除：{方法：删除，则params：{ID：'@id'}}
    }）
}）;
 

解决方案

更改请求的结构稍微固定problem-所以不是

  $ scope.updateSubject =功能（）{
    SubjectFactory.update（$ scope.subject）;
    $ location.path（'/主题/'）;
    $ scope.subjects = SubjectsFactory.query（）;
    $ route.reload（）;
};
 

现在

  $ scope.updateSubject =功能（）{
                SubjectFactory.update（$ scope.subject）$ promise.then（功能（主题）{
                    $ scope.subject =主体;
                    $ location.path（'/主题/'）;
                    $ route.reload（）;
                }，功能（错误）{
                    console.error（ERR）;
                }）;
            };
 

I'm having a recurrent problem with my angular app whereby it doesn't refresh the page after data has been added, edited or removed. So if I add a new item to a list of subjects, the new item doesn't appear on the list unless I navigate away from the page and then come back to it. I've tried using route.reload and then resetting the scope of the subjects list below. I put in an alert to see if it get fired- but the alert appears before the page redirects back to the list of subjects, which is strange as $location.path('/subjects') is two lines before it. Here's my controller:

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


}]);

Can anyone suggest a solution?

EDIT: Subjects Service

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

解决方案

Changing the structure of the requests slightly fixed the problem- so instead of

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

It is now

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

这篇关于角页面数据后不刷新添加或删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！