Search code examples
javascripthtmlangularjspage-refresh

AngularJS app not refreshing page when passed new parameters


I have an app I've written that takes a name as an argument, but when I click the link after loading some other name the page does nothing, despite the new arguments passed via the URL. I'd imagine the Angular DOM isn't having it reload since it's "technically" the same webpage. I do, however, need it to load the updated data.

Here's the Angular JS/HTML that populates the list of links:

<li ng-repeat="internalRep in internalReps "><a href="repweekly.html#!?rep={{internalRep.such}}">{{internalRep.such}}</a></li>

Now when you're on a totally different page and click one of the links it works perfectly. However, if you're already on ./repweekly.html#!?rep=REP1 and click on the link to go to ./repweekly.html#!?rep=REP5 it'll change the URL in the URL bar, but nothing else happens. If you then click the refresh button the correct data loads.


I changed the code to this:

<li ng-repeat="internalRep in internalReps "><a ng-href="./repweekly.html#!?rep={{internalRep.such}}">{{internalRep.such}}</a>

and again, while the URL in the address bar changes, the page doesn't reload to show the updated rep.


Solution

  • Alrighty, here's what I ended up doing -

    The link stays as Josué suggested with one exception - I added an ng-click directive ( ng-click="reloadRep()" ) to it:

    <li ng-repeat="internalRep in internalReps"><a ng-href="repweekly.html#?rep={{internalRep.such}}" ng-click="reloadRep()">{{internalRep.such}}</a></li>
    

    I then injected $window into the controller:

    angularApp.controller('mainController', ["$scope", "$http", "$filter", "$location", "$window", function ($scope, $http, $filter, $location, $window) {...
    

    and finally I created the function that runs when ng-click is called:

    $scope.reloadRep = function () {
        $window.location.reload();
    };