覆盖 angular ui-router 以链接到页面锚点

Question

我的页面上有指向锚点的链接 (a href="#idea")。 ui-router 显然覆盖了它们。有没有办法协调使用两者？谢谢。

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

Answer 1

你不应该以这种方式在 href 上使用它，相反你应该像下面这样添加它：

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

您可以在 $anchorScroll API here.

的底部看到一个例子

Answer 2

您好，我在使用锚点时遇到了类似的问题。

因为我想继续使用常规 HTML 语法 (href="#may-hash")，所以我制定了一个指令来查看 link 是否是一个锚点，如果是的话执行滚动操作。详细代码见：

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

                    });
                }
            }

        }
    };
}])

Answer 3

更好的方法是这样假设您处于 app.state1.child 状态并且您的锚标签是 #list，那么假设您 a 标签使用此代码

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

Answer 4

如果你想结合 ui-router 和锚标签，我用这段代码解决了我的问题

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

Answer 5

我知道这是一个老话题，但总是在寻找更好的解决方案来在我的应用程序中进行锚定。

今天我想在同一页面中滚动并测试了很多不同的解决方案。大多数时候这个是一般推荐：

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

覆盖 angular ui-router 以链接到页面锚点

override angular ui-router for links to page anchors

angularjs

anchor

angular-ui-router