javascript-angularjs-单击带有实际u的链接时刷新

我使用routeProvider为我的URL定义控件和模板。

当我单击具有与实际位置相同的URL的链接时,没有任何反应。 如果用户单击这样的链接,即使位置未更改,我也希望调用href方法。 换句话说,如果将位置设置为相同的值,则我希望它的行为与将其设置为不同的值时相同。

有没有一种方法可以配置routeProvider或locationProvider使其自动执行? 或正确的做法是什么? 这是往返应用程序中的标准行为,但是如何在angularjs中实现呢?

我也在Google网上论坛上问过。

更新:

这个问题引起了很多见解,因此我将尝试解释如何解决我的问题。

我创建了一个自定义指令,用于在我的应用程序中进行链接,就像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>

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

davekr asked 2020-02-17T15:07:31Z
10个解决方案
77 votes

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

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

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

  • href="#/test"

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

  • href="#/test"

唯一不同的是url中的最后一个斜杠。 当我第一次单击href="#/test"时,将URL角度重定向到#/test/,然后加载ng-view。 当我第二次单击它时,由于当前URL为2751704658338120120,它不等于我单击的链接中的URL(href="#/test"),因此Angular触发位置更改方法并重新加载ng-view,此外Angular还将url重定向到 再次#/test/。 下次我单击该URL时,angular再次执行相同的操作。 这正是我想要的。

希望这对您有用。

public0821 answered 2020-02-17T15:08:35Z
61 votes

您可以在链接上添加<a href="/not-my-base/link">link</a>,以强制重新加载页面。

例如

<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更改为<a href="/not-my-base/link">link</a>
  • 在现代浏览器中,URL更改为<a href="/not-my-base/link">link</a>

在以下情况下,链接不会被重写; 而是,浏览器将执行整页重新加载到原始链接。

  • 包含目标元素的链接范例:2751705534796796661760

  • 指向其他域的绝对链接范例:2751705534796796661760

  • 以'/'开头的链接在定义base时导致不同的基本路径范例:2751705534796796661760

Andy answered 2020-02-17T15:09:49Z
21 votes

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

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

Renan Tomal Fernandes answered 2020-02-17T15:07:43Z
8 votes

对于使用Angular UI Router的人。 您可以使用如下形式:

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

注意重新加载选项。

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

Robin van der Knaap answered 2020-02-17T15:10:18Z
6 votes

来自@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();
            }
        });
    }   
});
Wittaya answered 2020-02-17T15:10:47Z
1 votes

我认为这是一种更简单的方法。

.directive ('a', function ($route, $location) {
    var d = {};
    d.restrict = 'E';
    d.link = function (scope, elem, attrs) {

        // has target
        if ('target' in attrs) return;

        // doesn't have href
        if (!('href' in attrs)) return;

        // href is not the current path
        var href = elem [0].href;
        elem.bind ('click', function () {
            if (href !== $location.absUrl ()) return;
            $route.reload ();
        });
    };
    return d;
});

假设您要在点击时重新加载所有基本的<a>链接(不包含target),并在href属性中使用相对链接(例如/home而不是http://example.com/home)您无需在HTML上添加任何特殊标记(当使用时方便使用) 使用已编写的HTML更新网站)。

Márton Tamás answered 2020-02-17T15:11:12Z
0 votes

在我的情况下,如果网址相同,则$ route.reload(),$ location.path(),$ state.transitonTo()等均无效。

所以我的方法是如下使用“虚拟页面”,

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

您需要在某个地方制作“ / dummy”模块,该模块不执行任何操作,仅更改URL,以便可以将下一个$ location.path()应用。 不要错过$ scope。$ apply()

Elie Kim answered 2020-02-17T15:11:41Z
0 votes

我刚才遇到了这个问题,除了它是主页“ /”。 我想要一个使用更少代码的简单解决方案。 我只是利用$ routProvider中的.otherwise方法

所以在html链接中看起来像:

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

由于在routProvider中没有指定“ / home”页面,它将通过“ otherwise”方法重定向到“ /”。 设置页面:

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

希望它能帮助某人

Olivier Medor answered 2020-02-17T15:12:14Z
0 votes

我在上面使用指令方法尝试了Wittaya的解决方案。 指令以某种方式不断抛出错误。 我最终得到了这个解决方案

的HTML

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

控制者

    $scope.stateGo = function (stateName) {
        if ($state.$current.name === stateName) {
            $state.reload();
        } else {
            $state.go(stateName);
        }
    }
Jeson Martajaya answered 2020-02-17T15:12:43Z
-3 votes

刚刚尝试添加

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

而且效果很好

sib answered 2020-02-17T15:13:07Z
translate from https://stackoverflow.com:/questions/11267284/angularjs-refresh-when-clicked-on-link-with-actual-url