angularjs - refresh when clicked on link with actual url

Solution 1:

Add a / (slash) to the defined url in the route configuration

I met a similar problem today, I have a link in my web page and when I click it, I want the ng-view reload each time, so that I can refresh data from server. But if the url location doesn't change, angular doesn't reload the ng-view.

Finally, i found a solution to this problem. In my web page, I set the link href to:

• <a href="#/test">test</a>

But in the route config, I set:

• $routeProvider.when('/test/', { controller: MyController, templateUrl:'/static/test.html' });

The different is the last slash in url. When I click href="#/test" for the first time, angular redirect the url to #/test/, and load ng-view. when i click it second time, because the current url is #/test/, it's not equal to the url in the link (href="#/test") I clicked, so Angular triggers the location change method and reloads the ng-view, in addition Angular redirects the url to #/test/ again. next time i click the url, angular does the same thing again. Which is exactly what I wanted.

Hope this was useful for you.

Solution 2:

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>

Solution 3:

you should use $route.reload() to force the reload.

I don't know if is there a 'automatic' way to do this, but you can use ng-click on these links

Solution 4:

For people who are using AngularUI Router. You can use something like this:

<a data-ui-sref="some.state" data-ui-sref-opts="{reload: true}">State</a>

Notice the reload option.

Found the answer here: https://stackoverflow.com/a/29384813/426840