angularjs - 点击与实际网址的链接时刷新

Question

我使用routeProvider为我的网址定义控制器和模板.

当我点击与实际位置具有相同网址的链接时,没有任何反应.reload()如果用户点击这样的链接,即使位置没有改变,我也希望调用该方法.换句话说,如果我将位置设置为相同的值,我希望它的行为与我将其设置为不同的值相同.

有没有办法配置routeProvider或locationProvider自动执行？或者这样做的正确方法是什么？这是往返应用程序中的标准行为,但如何在angularjs中执行此操作？

我也在谷歌小组上问过它.

更新:

这个问题得到了很多观点,所以我将尝试解释我是如何解决我的问题的.

我在评论中建议Renan Tomal Fernandes建议我在我的应用程序中链接的自定义指令.

angular.module('core.directives').directive('diHref', ['$location', '$route',
        function($location, $route) {
    return function(scope, element, attrs) {
        scope.$watch('diHref', function() {
            if(attrs.diHref) {
                element.attr('href', attrs.diHref);
                element.bind('click', function(event) {
                    scope.$apply(function(){
                        if($location.path() == attrs.diHref) $route.reload();
                    });
                });
            }
        });
    }
}]);

然后该指令用于我想要具有此功能的应用程序中的所有链接.

<a di-href="/home/">Home</a>

该指令的作用是它根据href属性为您设置属性,di-href因此angular可以像往常一样处理它,当您将鼠标悬停在链接上时可以看到该URL.此外,当用户点击它并且链接的路径与当前路径相同时,它会重新加载路径.

Answer 1

在路由配置中为定义的URL添加/(斜杠)

我今天遇到了类似的问题,我的网页上有一个链接,当我点击它时,我希望每次都重新加载ng-view,以便我可以从服务器刷新数据.但是如果url位置没有改变,则angular不会重新加载ng-view.

最后,我找到了解决这个问题的方法.在我的网页中,我将链接href设置为:

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

但是在路由配置中,我设置:

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

不同的是url中的最后一个斜杠.当我href="#/test"第一次单击时,angular将URL重定向到#/test/,并加载ng-view.当我第二次点击它时,因为当前的url是#/test/,它不等于href="#/test"我点击的链接()中的url ,因此Angular触发位置更改方法并重新加载ng-view,此外Angular #/test/再次重定向url .下次我点击网址时,angular再次做同样的事情.这正是我想要的.

希望这对你有用.

Answer 2

您可以_target='_self'在链接上添加一个强制页面重新加载的链接.

例如

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

在IE和Firefox上测试版本1.0.5和1.2.15.

以下是AngularJS网站的更多信息:

Html链接重写

当您使用HTML5历史记录API模式时,您将需要在不同浏览器中使用不同的链接,但您所要做的就是指定常规URL链接,例如:

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

当用户点击此链接时

• 在旧版浏览器中,URL更改为 /index.html#!/some?foo=bar
• 在现代浏览器中,URL更改为 /some?foo=bar

在如下情况下,链接不会被重写; 相反,浏览器将执行整页重新加载到原始链接.

• 包含目标元素的链接示例: <a href="/ext/link?a=b" target="_self">link</a>

• 转到其他域的绝对链接示例: <a href="http://angularjs.org/">link</a>

• 以'/'开头的链接,在定义base时导致不同的基本路径示例: <a href="/not-my-base/link">link</a>

Answer 3

你应该使用$ route.reload()来强制重新加载.

我不知道是否有"自动"方式来执行此操作,但您可以使用ng-单击这些链接

Answer 4

对于使用AngularUI路由器的人.你可以使用这样的东西:

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

注意重载选项.

在这里找到答案:https://stackoverflow.com/a/29384813/426840

Answer 5

来自@Renan Tomal Fernandes的回答.以下是一个例子

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();
            }
        });
    }   
});