Question

Angular版本：最新 - 1.2

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

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

代码：

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

因此，当我点击上面生成的链接时，URL将替换为链接。

Eaxmple：

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也会被替换。

Answer 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

注意：我个人并没有对此进行过测试，但是问题主题中的一般回答是积极的，我可以按照自己的方式进行测试 - 希望这一切都能解决。

祝你好运。

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

1 个答案: