覆蓋角度ui路由器鏈接頁面錨點

我有我的網頁上的錨點鏈接（a href =「＃idea」）。 UI路由器顯然會覆蓋它們。有沒有一種方法可以協調使用？謝謝。覆蓋角度ui路由器鏈接頁面錨點

https://gist.github.com/anonymous/2880f2f2c9f91b0b695f#file-gistfile1-txt

2015-02-06 guyja

那麼你不應該使用它在href這種方式，而應該將其添加類似如下：

<a href="" ng-click="gotoAnchor()">...</a>

您可以在底部看到這樣的例子$anchorScroll API here.

來源

2015-02-06 21:09:03 Bricktop

謝謝您的回答。你是對的。 – guyja 2015-02-06 21:59:52

感謝這爲aswer Bricktop。儘管你的解決方案在一定程度上起作用。如果我想使用我的主播內容作爲彈出窗口/模式，而不使用$ modal或UI引導程序庫，在我看來，它仍然讓我頭暈目眩？ – AllJs 2016-04-24 06:41:02

我不確定我是否理解你的用例。如果你想將內容提供給你的錨點和一個模式，那麼你可以通過你的控制器來做到這一點，它將數據提供給兩者。 – Bricktop 2016-04-24 08:08:57

嗨我有類似的問題與錨點。

因爲我想繼續使用常規的HTML語法（href =「＃may-hash」）我做了一個指令，看看鏈接是錨點，如果是的話執行滾動操作。見詳細代碼：

/** 
* Ressource : https://docs.angularjs.org/api/ng/service/$anchorScroll 
*/ 
.directive('a', ['$location', '$anchorScroll', function ($location, $anchorScroll) { 
    return { 
     restrict: 'E', 
     link: function (scope, elem, attrs) 
     { 
      // href should be defined and not empty 
      if(typeof attrs.href!=='undefined' && attrs.href.length > 0) 
      { 
       // href should be an anchor 
       if(attrs.href.substring(0, 1) === '#') 
       { 
        elem.on('click', function (e) 
        { 
         // if current hash is different from requested hash 
         // then set new hash 
         // no need to call $anchorScroll() 
         // since scroll is auto if you've not used $anchorScroll.disableAutoScrolling() 
         if ('#' + $location.hash() !== attrs.href) 
         { 
          $location.hash(attrs.href); 
         } 
         // if hash is the same, force scroll 
         else 
         { 
          $anchorScroll(); 
         } 

        }); 
       } 
      } 

     } 
    }; 
}])

來源

2015-10-28 12:23:55 hugsbrugs

更好的辦法來做到這一點是這樣說你是在狀態app.state1.child和你的錨標籤是#list，所以說，你a標籤使用此代碼

<a ui-sref="app.state1.child#list">Link</a>

來源

2016-04-27 09:44:31

你的代碼不正確。看看我的答案。 – 2016-11-02 11:25:47

如果你想結合ui路由器與錨標記，我解決了我的問題，使用此代碼

<a ui-sref="routename({'#': 'ownerfeatures'})">Link</a>

來源

2016-11-02 11:25:12

我知道是一個老話題，但alwa ys卡住尋找一個更好的解決方案來錨定我的應用程序。

今天我正在瀏覽同一頁面並測試了很多不同的解決方案。大多數時候，這個人是一般建議：

<a ui-sref="routename({'#': 'ownerfeatures'})">Link</a>

與這一個問題是工作過渡到一個新的狀態，並轉至錨，但如果你想只在滾動無法正常工作相同的頁面，因爲它只能用於第一次點擊。

然後我意識到使用$anchorScroll應該是偉大的，我做了這個指令也許可以幫助某人。注意我沒有使用location.hash，因爲我不想將哈希添加到我的地址欄中，而且還有我的流程中的某些情況，在不需要時使屏幕滾動。

function anchorScroll($anchorScroll){ 
    return { 
     restrict: 'A', 
     scope: { 
     target: '=anchorScroll' 
     }, 
     link: function (scope, element, attrs) { 
     element.bind('click', function(event) { 
      console.log(scope.target) 
      $anchorScroll(scope.target); 
     }) 
     } 
    } 
    }

但也有一個非常簡單的方法，只是在模板中使用$anchorScroll。在你的控制器：

$scope.anchorScroll = $anchorScroll;

並在視圖：

<a href="" ng-click="anchorScroll('nameOfTheAnchor')">Scroll to ID</a>

來源

2017-10-06 14:18:12 Octavioamu

覆蓋角度ui路由器鏈接頁面錨點

回答

相關問題