试试这个可以解决锚的问题。

app.run(function($location, $anchorScroll){
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});

这里是一种肮脏的工作方法，通过创建自定义指令，将滚动到指定的元素(硬编码的“faq”)

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

我试图让我的Angular应用在加载时滚动到一个锚点，却遇到了$routeProvider的URL重写规则。

经过长时间的试验，我确定了这一点:

注册一个文档。的.run()部分中的Onload事件处理程序 Angular的app模块。 在处理程序中找出原来的 锚标签应该是通过做一些字符串操作。 覆盖的位置。哈希与剥离锚标记(其中 导致$routeProvider立即再次覆盖它 “# /”规则。但这没关系，因为Angular现在与 URL调用$anchorScroll()中发生了什么。

[], angular.module (bla)。}]) .run(函数(位置,anchorScroll美元){ $(文档)时函数(){ 如果位置。location.hash.length>=1) { Var path = location.hash; var potentialAnchor = path.substring(path.lastIndexOf("/")+1); if($(“#”+ potentialAnchor)。长度> 0){//确保该标签在doc中存在。 的位置。hash = potentialAnchor; 美元anchorScroll (); ｝ ｝ })；

上面的方法对我都没用，但我刚试了一下，而且很管用，

<a href="#/#faq-1">Question 1</a>

所以我意识到我需要通知页面从索引页开始，然后使用传统的锚。

我不能100%确定这是否一直工作，但在我的应用程序中，这给了我预期的行为。

假设你在ABOUT页面，你有以下路由:

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

现在，在HTML中

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

总之

在锚点之前包含页面名称对我来说很有用。 让我知道你的想法。

缺点

这将重新呈现页面，然后滚动到锚点。

更新

更好的方法是添加以下内容:

<a href="#tab1" onclick="return false;">First Part</a>

我在我的应用程序的路由逻辑中解决了这个问题。

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}