Reputation: 3066
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
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
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
Reputation: 2084
Use
$window.location.reload() instead of $route.reload()
This should fix .
Upvotes: 6
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
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