部分页面中的 href 与 angularJS 路由冲突（$rotueprovider）答案

【问题标题】：a href in partial page conflicts with angularJS routing($rotueprovider)部分页面中的 href 与 angularJS 路由冲突（$rotueprovider）
【发布时间】：2014-02-04 06:21:49
【问题描述】：

Angular 版本：最新 --1.2

我正在基于$routeprovider 将视图加载到ng-view，我正在开发应用程序，所以现在我只是在浏览器中提供 URL 并加载其对应的 VIEW。

问题是我在部分页面中有链接，这应该让我滚动到特定的 div，并且这些链接是使用 ng-repeat 生成的。

代码：

<li ng-repeat = "(key,val) in test.Questions">      
    <a href="#{{key}}" >{{ $index+1}}</a>        
</li>

所以当我点击上面生成的链接时，URL 被替换为链接。

示例：

http://localhost:8085/Questionarie/#/exam/533135

是加载 VIEW 的 URL，但它的替换如下：

http://localhost:8085/Questionarie/#QS7.....

我想要这样的东西

http://localhost:8085/Questionarie/#/exam/533135#QS7

注意：我尝试使用$anchorscroll，但只有当我在scrollTO('foo')... 中给出字符串文字时它才能工作，如果我给出scrollTo({{foo}}).. 它不起作用

现在我没有使用任何后端，只是在 localhost 中开发 UI。我看到了一些关于 HTML5 模式的信息，但不明白如何使用。

另外我也打算用NodeJS在以后表达。

结论所以问题是内部页面链接与 angularJS 路由冲突，不仅是我上面提到的情况，而且在使用 Twitter Bootstrap 选项卡时，URL 也会被替换。

【问题讨论】：

标签： html angularjs routing ng-view

【解决方案1】：

不确定这是否适用于 ngRouter，但我强烈建议切换到支持嵌套视图的 ui-router，仅举几个好处之一。

第 1 步：取消注册 $anchorScroll 服务。

angular.module('myapp', [...]).value('$anchorScroll', angular.noop)...

第 2 步：在 $viewContentLoaded 上设置监听器。

myapp.run(['$state', '$stateParams', '$window', function ($state, $stateParams, $window) {
  $rootScope.$on('$viewContentLoaded', function () {
    var state = $state.$current;
    if (state.scrollTo == undefined) {
      $window.scrollTo(0, 0);
    } else {
      var to = 0;
      if (state.scrollTo.id != undefined) {
        to = $(state.scrollTo.id).offset().top;
      }
      if ($($window).scrollTop() == to) {
        return;
      }
      if (state.scrollTo.animated) {
        $(document.body).animate({scrollTop:to});
      } else {
        $window.scrollTo(0, to);
      }
    }
  });
}]);

第 3 步：设置您的状态

state('applications.details', {         
  ...
  scrollTo    : { id:'#applications-content-anchor', animated: true }
}).

感谢 GitHub 上的 gaelduplessix。

https://github.com/angular-ui/ui-router/issues/110

注意：我自己没有对此进行测试，但问题线程中的一般反应足以让我以你的方式放弃 - 希望一切都会解决。

祝你好运。

【讨论】：