AngularJs route.reload(); infinite loops

Question

i'm a newbie in AngularJS, i got some Jsonp files witch they're generated by drupal. My problem come when i'm trying to show the informations of my articles on my view.

<!-- Script JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-resource.js"></script>

<script>
// mon module app contient les module de Route et de Sanitize 
var app = angular.module('app', ['ngSanitize', 'ngRoute', 'ngResource'])


// systeme de routing
app.config(function($routeProvider){
    $routeProvider
        .when('/home', {templateUrl: 'partials/home.html', controller: 'contentsCtrl'})
        .when('/test/:nid', {templateUrl: 'partials/test.html', controller: 'contentsCtrl'})
        .otherwise({redirectTo : '/'});
})

app.factory('ContentFactory', function($http, $q){
    var factory = {
        contents : false,
        resource : $http.jsonp('http://achahada.fr/json/articles/node.jsonp?callback=JSON_CALLBACK'),//objet recourse qui me permettra de changer la source de mon json en fonction de l'id demander
        getContents : function(){
            var deferred = $q.defer();
            factory.resource
                .success(function(data, status){
                    factory.contents = data;
                    deferred.resolve(factory.contents);
                })
                .error(function(data, status){
                    deferred.reject('Impossible de récupérer les articles');
                });
            return deferred.promise;
        },
        getContent : function(nid){
            var content = {};
            var deferred = $q.defer();
            angular.forEach(factory.contents, function(value, key){
                if(value.nid == nid){
                    //si il y a un nid alors la source de mon content sera le fichier json assortie a celui-ci
                    factory.resource = $http.jsonp('http://achahada.fr/json/articles/node/'+nid+'.jsonp?callback=JSON_CALLBACK');
                    factory.resource
                    .success(function(data, status){
                        factory.contents = data;
                        deferred.resolve(factory.contents);
                    })
                    .error(function(data, status){
                        deferred.reject('Impossible de récupérer les articles');
                    });
                    return deferred.promise;
                    content = value;
                }
            });
            return content;
        },
    }
    return factory;
})


app.controller('contentsCtrl', function ($scope, ContentFactory, $routeParams, $route){
        $scope.loading = true; // affichera un message de chargement
        var content = ContentFactory.getContent($routeParams.nid);
        //$scope.reload = $route.reload();
        $scope.contents = ContentFactory.getContents().then(function(contents){
                $scope.loading = false; // dès qu'on a finie de charger on arrete le chargement
                $scope.contents = contents;
            }, function(msg){
                alert(msg);
            })

});


</script>

i successed when i want to get my article by my link partials/test:nid.html where nid = the id of the article. but if i want to see another one nothings happens. so i tried a $route.reload(); but thats generated me an infinite loops of request.

some help plz

Answer 1

put the $route.reload inside $routeChangeSuccess

$rootScope.$on('$routeChangeSuccess', function() {
    $route.reload();
});

Answer 2

The problem is that you are calling the $route.reload function and adding the result to the $scope. I assume what you really want is to add the $route.reload function itself to the $scope. You need to change your code to one of the following:

$scope.reload = $route.reload;

$scope.reload = function(){ $route.reload(); };