angular page reload stuck in a loop

Question

I build an Angular app for which I need a page reload when I the app goes to '#/browse'. When the browse.html is reached the app should reload the page. Right now the app keeps on reloading the page over and over again. It is stuck in a kind of loop. Does anyone knows how to break this loop? Thanks a lot.

browse.html.

<div class="header">
<div class="container-fluid">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <form class="navbar-form navbar-left searchbarNav" role="search">

        </form>
        <ul class="nav nav-pills pull-right" ng-controller="NavbarController">

            <li ng-class="{active:getActive('/home')}"><a href="#/products">Browse products</a></li>
            <li ng-class="{active:getActive('/browse')}"><a href="#/browse">Explore products</a></li>

            </ul>
        </div>
    </div>
</div>



<div class="ContentFlow">

<div class="loadIndicator"><div class="indicator"></div></div>

    <div class="flow" >

    <img ng-repeat="p in products" class="item" ng-src="static/products/img/{{p.thumbnail}}"
         title="{{p.name}} &#8364;{{p.price}}"  ng-href="#/products/{{p.id}}">

</div>
<div class="globalCaption"></div>
<div class="scrollbar">
    <div class="slider"><div class="position"></div></div>
</div>

</div>

controller.js

app.controller('BrowseController', function($scope, $window, Product){

Product.query(function(data){
    $scope.products = data
})

$window.location.reload()

})

app.js 'use strict';

var app = angular.module('pgApp', ['ui']);

app.config(function ($routeProvider, $httpProvider) { $routeProvider

.when('/home',
  {
    controller: 'ProductListController',
    templateUrl: 'static/products/app/partials/products.html'
  })
.when('/products/:productId',
  {
    controller: 'ProductDetailController',
    templateUrl: 'static/products/app/partials/product.html',

  })
.when('/browse',{
      controller: 'BrowseController',
      templateUrl: 'static/products/app/partials/browse.html'
  })
.when('/about',
  {
    templateUrl: 'static/products/app/partials/about.html'
  })
.otherwise({ redirectTo: '/home' });

$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
});

browser controller is called on the path set in app config. getActive() only adds a class to element to show it is on that page — nick appel
1) Post your app configuration. 2) I seriously hope the $window.location.reload() line is not in your controller. You realize that it will be called every time the BrowseController is instantiated right? That would cause an infinite loop of page reloads. — Mike Quinlan
Hi mike I have the config file in. I am still trying to get around Angular. the $window.location.reload() was indeed in the controller and it make sense what you say. However, I am not able to get the page to reload just once when it is on the path. — nick appel

nick appel nick appel · Accepted Answer · 2014-05-30T18:03:56

I found the solution to the deeper problem where this question came from. I used a js plugin called contentflow.js. However this plugin is not really good in handling async data. In order to solve this I put the piece of code of the plugin which was responsible for the problem in a function and called this function in the controller.

controller

 app.controller('BrowseController', function($scope, $window, $location, Product){

     Product.query(function(data){
          $scope.products = data
     })

     ContentFlowGlobal.load()
 })

Here the changed code in the contentflow.js. The function can be found in the line number 202, right after the "init the rest" comment.

 /* init the rest */

        ContentFlowGlobal.load = function(){
            setTimeout(function(){
                var divs = document.getElementsByTagName('div');
                DIVS: for (var i = 0; i < divs.length; i++) {
                    if (divs[i].className.match(/\bContentFlow\b/)) {

                        for (var j=0; j<ContentFlowGlobal.Flows.length; j++) {
                            if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS;
                        }
                        var CF = new ContentFlow(divs[i],{}, false);
                        CF.init();
                    }
                }
            },1000)
        }

The problem was that the elements were not completely rendered before the js file was called. That is why the element could not be found on the page and the array could not be filled with the data needed to display. This is solved by using the setTimeout.

It might not be the best solution but it works. If you have a better solution feel free to add.

angular page reload stuck in a loop

1 Answers