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

Question

我使用routeProvider來爲我的網址定義controlers和模板。

當我點擊鏈接，它具有相同的URL是實際的位置上，沒有任何反應。如果用戶點擊這樣的鏈接，即使位置沒有改變，我也希望調用reload()方法。換句話說，如果我將位置設置爲相同的值，我希望它的行爲與我將它設置爲不同的值相同。

是否有配置routeProvider或locationProvider自動做到這一點的方法嗎？或者什麼是正確的做法呢？這是往返應用程序中的stadard行爲，但如何在angularjs中執行此操作？

我問它google groups爲好。

UPDATE：

這個問題，獲得了大量的意見，所以我會盡量解釋我如何解決我的問題。

我創建了一個自定義的指令，在我的應用程序連接的勒南TOMAL費爾南德斯意見提出。

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屬性。此外，當用戶點擊它並且鏈接的路徑與當前路徑相同時，它將重新加載路由。

Answer 1

你應該使用$route.reload()強制重裝。這些鏈接

Answer 2

我不知道是否有一個「自動」的方式做到這一點，但你可以用NG點擊可以鏈接到部隊頁面重新加載上添加_target='_self'。

例如

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

我在IE和Firefox版本1.0.5和1.2.15上測試了它。似乎工作正常。

下面是AngularJS site更多信息：

HTML鏈接重寫

當您使用HTML5歷史API模式，則需要在不同的瀏覽器不同的鏈接，但所有你需要做的就是指定正規網址鏈接，如：

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

當用戶點擊該鏈接，

• 在舊版瀏覽器中的URL更改爲/index.html#!/some?foo=bar
• 在現代瀏覽器，網址更改爲/some?foo=bar

在類似下列情況下，鏈接不會改寫;相反，瀏覽器將執行整頁重新加載到原始鏈接。 <a href="/ext/link?a=b" target="_self">link</a>

絕對鏈接，去到不同的域 舉例：：

• 含有目標元素 實施例鏈接<a href="http://angularjs.org/">link</a>

• 鏈接開始以「/」，導致一個不同的基定義基準時的路徑 示例：<a href="/not-my-base/link">link</a>

Answer 3

添加/（斜槓）來定義的URL的路由配置

我今天遇到了類似的問題，我有一個鏈接在我的網頁，當我點擊它，我想了NG-視圖每次重新加載，以便我可以從服務器刷新數據。但是，如果URL位置不變，角度不會重新加載ng視圖。

最後，我找到了解決這個問題的方法。在我的網頁，我的鏈接的href設置爲：

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

但在航線配置，我設置：

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

不同的是網址中的最後一個斜槓。當我第一次點擊href="#/test"時，角度重定向url到#/test/，並加載ng-view。當我點擊它第二次，因爲當前的網址是#/test/，它不等於鏈接中的網址（href="#/test"）我點擊，所以Angular會觸發位置更改方法並重新加載ng-view，此外Angular會將url重定向到再次請求#/test/。下次我點擊網址，角度再次做同樣的事情。這正是我想要的。

希望這對你有用。

Answer 4

從@Renan Tomal Fernandes answer。下面是一個例子

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 5

在我的情況下，如果網址相同，沒有什麼工作包括$ 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（）可以應用 。千萬不要錯過$範圍。$適用（）

Answer 6

只是嘗試添加該

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

，它工作正常

Answer 7

我就遇到了這個問題剛纔，除了它的主頁'/'。我想要一個簡單的解決方案，代碼少。我只是利用了。否則的方法在$ routProvider

所以在HTML鏈接的樣子：

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

因爲在routProvider沒有指定「/主頁」會重定向到' /'通過'其他'方法。本頁面設置：

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

希望它可以幫助別人

Answer 8

對於誰使用AngularUI Router人。你可以使用這樣的東西：

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

請注意重載選項。

找到答案在這裏：https://stackoverflow.com/a/29384813/426840

Answer 9

我試着用以上方法的指令Wittaya的解決方案。不知何故，該指令不斷拋出錯誤。我結束了這個解決方案

HTML

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

控制器

Answer 10

我認爲這是一個簡單的方法。

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