Question

我有一个带有一系列主题的角度CRUD应用程序。我可以添加，删除和编辑主题。我的问题是，当我添加或删除主题时，页面不会刷新新的主题列表。我尝试过包含$route.reload();，但它给了我一个控制台错误：

ReferenceError：$ route未定义

有人可以建议如何修复此错误或更好的刷新页面的方法吗？

HTML：

<h3>Add a Subject</h3>

 <div ng-controller="SubjectNewCtrl">
    <div class = "input-group">
<form name="newSubjectForm">
Name: <br /> <input type="text" name="name" ng-model="subjects.name">
<br />

<a href="#/subjects"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></button></a>
 <a ng-click="createNewSubject()" class="btn btn-small btn-primary">Save Changes</a>

</form>
</div>

</div>

SubjectNewCtrl：

angular.module('myApp.controllers')
    .controller('SubjectNewCtrl', ['$scope', 'SubjectsFactory',  '$location',
    function ($scope, SubjectsFactory, $location) {

        // callback for ng-click 'createNewSubject':

        $scope.createNewSubject = function () {
            SubjectsFactory.create($scope.subjects);
            $location.path('/subjects');

//This gives the console error
            $route.reload();
        }

    $scope.subjects = SubjectsFactory.query();

    }]);

编辑我在app.js中的路由

'use strict'


angular.module('myApp',
[
'ngRoute',
'ngResource',
'myApp.services',
'myApp.directives',
'myApp.controllers',
]);

angular.module('myApp')
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.
  when('/subjects', {templateUrl: 'partials/subjects/subject-list.html', controller: 'SubjectCtrl'}).
  when('/subjects/new', {templateUrl: 'partials/subjects/subject-new.html', controller: 'SubjectNewCtrl'}).
  when('/subjects/:subjectid', {templateUrl: 'partials/subjects/subject-detail.html', controller: 'SubjectEditCtrl'}).
otherwise({redirectTo: '/home'});
}]);

Answer 1

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

    // callback for ng-click 'createNewSubject':

    $scope.createNewSubject = function () {
        SubjectsFactory.create($scope.subjects);
        $location.path('/subjects');

//This gives the console error
        $route.reload();
    }

$scope.subjects = SubjectsFactory.query();

}]);

我在你的功能中添加“$ route”

Answer 2

尝试使用 location.reload（）;

例如

        vm.deleteUser = function (id) {
        dataService.deletUser(id)
            .then(function () {
                location.reload();
            });
        };

Answer 3

在更新主题列表时使用scope.$apply不要强制整个页面重新加载...

$scope.createNewSubject = function() {
    $scope.$apply(function() {
        SubjectsFactory.create($scope.subjects);
    });
};

顺便说一句。如果您已经在该页面上，则$location.path('/subjects')不会执行任何操作

Answer 4

你可能想尝试这样的事情，而不是重新加载路线：

$scope.createNewSubject = function () {
    SubjectsFactory.create($scope.subjects).then(function (newSubject) {
        $scope.subjects = SubjectsFactory.query();  // [1]
    });
}

此版本等待创建请求完成后再重新获取主题列表（包括新主题），这将导致视图自动刷新。

在您的代码中，您在启动创建请求后立即重新加载当前路径/视图，而不会让创建请求有机会完成，因此新主题实际上还不存在。

[1]或者，您可能更愿意$scope.subjects.push(newSubject)而不是重新获取主题列表。

添加/删除数据时，Angular页面不会刷新

4 个答案: