Question

我有链接到我页面上的锚点（一个href =＆＃34;＃idea＆＃34;）。 ui-router显然会覆盖它们。有没有办法和谐地使用它们？谢谢。

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

Answer 1

那么你不应该以{{1}}的方式使用它，而应该像下面那样添加它：

href

您可以在<a href="" ng-click="gotoAnchor()">...</a> API here.

的底部看到相关示例

Answer 2

嗨我和锚有类似的问题。

由于我想继续使用常规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();
                        }

                    });
                }
            }

        }
    };
}])

Answer 3

更好的方法是这样做假设您处于州app.state1.child状态，而您的锚标记为#list，请说明a代码使用此代码

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

Answer 4

如果你想把ui-router和anchor标签结合起来，我用这个代码解决了我的问题

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

覆盖角度ui-router以获取页面锚点的链接

5 个答案: