CODEWITHSUNDEEP
angularjs
bookthief
bookthief

Reputation: 2461

Angular page doesnt refresh when data added/deleted

I have an angular CRUD app with a list of subjects. I can add, delete and edit the subjects. My problem is that when I add or delete a subject, the page does not refresh with the new list of subjects. I've tried including $route.reload(); but it gives me a console error:

ReferenceError: $route is not defined

Can anyone advise how to fix this error or a better way of refreshing the page?

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

    }]);

EDIT- my routing in 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'});
}]);

Upvotes: 0

Views: 8326

Answers (4)

user2662006
user2662006

Reputation: 2294

try to use location.reload();

example

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

Upvotes: 2

Wyatt Baldwin
Wyatt Baldwin

Reputation: 91

You might want to try something like this instead of reloading the route:

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

This version waits until the create request has completed before refetching the list of subjects (including the new subject), which will cause the view to refresh automatically.

In your code, you're reloading the current route/view immediately after initiating the create request without giving the create request a chance to complete, so the new subject actually doesn't exist yet.

[1] Alternatively, you might prefer to do $scope.subjects.push(newSubject) instead of refetching the list of subjects.

Upvotes: 0

KoIIIeY
KoIIIeY

Reputation: 558

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

}]);

I add "$route" to your function

Upvotes: 4

doodeec
doodeec

Reputation: 2927

use scope.$apply when updating the list of subjects do not force the whole page to reload...

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

btw. $location.path('/subjects') doesn't do anything if you are already on that page

Upvotes: 0

Related Questions