javascript - angular title




angularjs-點擊與實際網址的鏈接時刷新 (7)

我使用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>

該指令的作用是它根據di-href href屬性為你設置href屬性,因此angular可以像往常一樣處理它,當你將鼠標懸停在鏈接上時你可以看到url。 此外,當用戶點擊它並且鏈接的路徑與當前路徑相同時,它會重新加載路徑。


在路由配置中為定義的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。 當我第二次點擊它時,因為當前網址是#/test/ ,它不等於我點擊的鏈接中的網址( href="#/test" ),所以Angular會觸發位置更改方法並重新加載ng-另外,Angular將URL重定向到#/test/ 。 下次我點擊網址時,angular再次做同樣的事情。 這正是我想要的。

希望這對你有用。


你應該使用$route.reload()來強制重新加載。

我不知道是否有“自動”方式來執行此操作,但您可以使用ng-單擊這些鏈接


剛試過添加這個

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

它工作正常


在我的情況下,如果網址相同,沒有任何工作,包括$ route.reload(),$ location.path(),$ state.transitonTo()等。

所以我的方法是使用Dummy Page,如下所示,

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


您可以在鏈接上添加_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>


我使用指令方法嘗試了上面的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);
        }
    }

我認為這是一種更簡單的方法。

.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的網站時非常方便)。





angularjs