angularjs - refresh when clicked on link with actual url

Question

I use routeProvider to define controlers and templates for my urls.

When I click on the link, which has the same url as is the actual location, nothing happens. I w

Answer 1

You can add a _target='_self' on the link to forces the page to reload.

e.g.

<a href="/Customer/Edit/{{customer.id}}" target="_self">{{customer.Name}}</a>

Tested with version 1.0.5 and 1.2.15 on IE and Firefox.

Here's more information from AngularJS site :

Html link rewriting

When you use HTML5 history API mode, you will need different links in different browsers, but all you have to do is specify regular URL links, such as:

<a href="/some?foo=bar">link</a>

When a user clicks on this link,

• In a legacy browser, the URL changes to /index.html#!/some?foo=bar
• In a modern browser, the URL changes to /some?foo=bar

In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.

• Links that contain target element Example: <a href="/ext/link?a=b" target="_self">link</a>

• Absolute links that go to a different domain Example: <a href="http://angularjs.org/">link</a>

• Links starting with '/' that lead to a different base path when base is defined Example: <a href="/not-my-base/link">link</a>

Answer 2

From @Renan Tomal Fernandes answer. following is an example

HTML

<a href="#/something" my-refresh></a>

JS

angular.module("myModule",[]).
directive('myRefresh',function($location,$route){
    return function(scope, element, attrs) {
        element.bind('click',function(){
            if(element[0] && element[0].href && element[0].href === $location.absUrl()){
                $route.reload();
            }
        });
    }   
});

Answer 3

In my case if the url is same, nothing worked including $route.reload(), $location.path(), $state.transitonTo() etc.

So my approach was Using Dummy Page as follows,

if( oldLocation === newLocation ) {
   // nothing worked ------------
   // window.location.reload(); it refresh the whole page
   // $route.reload();
   // $state.go($state.$current, null, { reload: true });
   // $state.transitionTo($state.current, $stateParams, {reload:true, inherit: false, notify: false } );
   // except this one
   $location.path('/dummy'); 
   $location.path($location.path());
   $scope.$apply(); 
}

You need to make '/dummy' module somewhere, the module doesn't do anything, it only change url so that next $location.path() can be applied. Don't miss $scope.$apply()

Answer 4

I tried Wittaya's solution above using directive approach. Somehow the directive keeps throwing error. I end up with this solution

HTML

<a href="javascript:void(0)" data-ng-click="stateGo('devices')">Devices</a>

Controller

    $scope.stateGo = function (stateName) {
        if ($state.$current.name === stateName) {
            $state.reload();
        } else {
            $state.go(stateName);
        }
    }

Answer 5

I ran into this issue a moment ago, except for it was the home page '/'. I wanted a simple solution with less code. I just took advantage of the .otherwise method in the $routProvider

So in the html link looks like:

<a href="#/home">Home</a>

since there is no '/home' page specified in the routProvider it will redirect to '/' via the 'otherwise' method. page with this set up:

.otherwise({
redirectTo: '/'
});

Hope it helps someone

Answer 6

Just tried adding this

$(window).on('popstate', function(event) {
//refresh server data
});

and it works fine