CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Abhishek
Abhishek

Reputation: 3066

Angularjs $route.reload() not working

I have an angular app and i am trying to achieve a refresh of the page. I am trying the $route.reload() as suggested in many posts. But i am not able to get it to work (Chrome is throwing me an error). Here is my controller:

var app = angular.module('StudentProgram', ['ngRoute', 'ui.bootstrap', 'jsonService']);

        app.controller('mycontroller', function($route, RequirementsService, DegreesService, DegreeCategoriesService, DetailsService, ProgramsService, $scope, $modal, $log, $http) {
          ProgramsService.getItems(function(data){
        $scope.programs  = data;
        console.log(data);
      });

          $scope.addDegree = function(degree) {
            var variablesToSend =   {
                                       "acad_program_type": degree.acad_program_type,
                                            "program_title": degree.program_title, 

                                        }
                                    }
            $http.post('/api/studentacademicprogram/', variablesToSend).then(function(response){
                console.log(response);
                alert('post added');
                $route.reload();
            }, function(response){
                console.log(response);
                alert('post not added');
            });
          };

Here is the div where i am accessing the function:

<div ng-show="display.academicdegrees" class="col-lg-8 col-md-8 col-sm-8">
                <div class="panel panel-warning list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:400px;overflow:auto;position:relative;">
                    <div class="panel-heading">
                        {% verbatim %}
                        <h3 class="panel-title">{{DegreeCategory}}</h3>
                        {% endverbatim %}
                    </div>

                </div>
            </div>

Where am i making the error? The page is refreshing when i hit the refresh button but it does not happen when i call the function.

Upvotes: 2

Views: 27045

Answers (5)

علیرضا
علیرضا

Reputation: 2652

for using $route.reload() you should noticed that $route is depend on $location and $routeParams, so you must inject theme in your controller. (reference)

Upvotes: 1

Siddharth Pandey
Siddharth Pandey

Reputation: 669

app.factory('safeApply', [function($rootScope) {
    return function($scope, fn) {
        var phase = $scope.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            if (fn) {
                $scope.$eval(fn);
            }
        } else {
            if (fn) {
                $scope.$apply(fn);
            } else {
                $scope.$apply();
            }
        }
    }
}]);

/*you have to use above created factory below your $route.reload();

Just Refer Below*/

 $http.post('/api/studentacademicprogram/', variablesToSend).then(function(response){
                console.log(response);
                alert('post added');
                $route.reload();
                safeApply($scope);
}

/*As the scope is not being watched properly this issue happens */

Upvotes: 0

Sharad Biradar
Sharad Biradar

Reputation: 2084

Use

$window.location.reload() instead of $route.reload()

This should fix .

Upvotes: 6

Johan
Johan

Reputation: 187

If you want to add it to the list you don't want to refresh the page, you push it to the array your ng-repeat is reapeating out. A good place to do this in your code is in the success callback for adding the resource to your backend.

Upvotes: 0

mbroadst
mbroadst

Reputation: 888

You must make sure to include the angular-route.js (or minified version) in your index.html in order to use ngRoute in your module.

Upvotes: 1

Related Questions