如何禁用angularjs NG-视图$ anchorScroll [英] How to disable $anchorScroll in angularjs ng-view

问题描述

我创建了引导标签根据传入的变化选择的参数的URL来显示选项卡，然后切换路由指令。

每次选项卡单击视图载荷和整个页面滚动到顶部。我试图禁用页面滚动，但无论我怎么努力，我不能得到它的工作。

任何帮助是极大AP preciated。

JS code：

  VAR reportApp = angular.module（'reportApp'，[]）
//禁用anchorScroll
.value的（'$ anchorScroll'，angular.noop）
的.config（
  ['$ routeProvider'，函数（$ routeProvider）{
      $ routeProvider.when（/，{
        templateUrl：t1.html
        控制器：'T1Ctrl'}
      ）
      ...
 }//指令切换标签
reportApp.directive（'changeSelection'，函数（$位置）{
        返回功能（范围，元素，属性）{
            element.bind（'点击'，功能（E）{
                亦即preventDefault（）;
                $（元素）的.tab（'秀'）;
                $ location.path（attr.changeSelection）;
                。范围$适用（）;
            }）;
        }
    }
）;
 

HTML：

 ＆LT; D​​IV ID =TabContainer的阶级=span12＆GT;
    ＆LT; UL类=净值资产净值的选项卡ID =reportTabs＆GT;
        ＆LT;李班=主动＆GT;＆LT; A HREF =＃转换选择=/倾向＆GT; TAB2＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =标签内容＆GT;
    ＆LT; D​​IV数据-NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

我最终加入的风格标签内容股利。这prevents div和浏览器刷新的大小调整。所以，毕竟这已经无关angularjs。

从更改：

 ＆LT; D​​IV CLASS =标签内容＆GT;
    ＆LT; D​​IV数据-NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

到

 ＆LT; D​​IV CLASS =标签内容的风格=最小高度：500像素＆GT;
    ＆LT; D​​IV数据-NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

I created a directive for bootstrap tabs to show the tab and switch the route based on the url passed in as a parameter of change-selection.

Every time tab is clicked view loads and entire page scrolls to the top. I am trying to disable page scrolling but no matter what I try I can't get it to work.

Any help is greatly appreciated.

JS Code:

var reportApp = angular.module('reportApp', [])
//Disable anchorScroll
.value('$anchorScroll', angular.noop)
.config(
  ['$routeProvider', function ($routeProvider) {
      $routeProvider.when("/", {
        templateUrl: "t1.html",
        controller: 'T1Ctrl'}
      )
      ...
 }

//Directive to switch tab
reportApp.directive('changeSelection', function ($location) {
        return function (scope, element, attr) {
            element.bind('click', function (e) {
                e.preventDefault();
                $(element).tab('show');
                $location.path(attr.changeSelection);
                scope.$apply();
            });
        }
    }
);

HTML:

<div id="tabContainer" class="span12">
    <ul class="nav nav-tabs" id="reportTabs">
        <li class="active"><a href="#" change-selection="/tendencies">Tab2</a></li>
    </ul>
</div>
<div class="tab-content">
    <div data-ng-view></div>
</div>

解决方案

I ended up adding style to the tab content div. This prevents resizing of the div and browser refresh. So after all it had nothing to do with angularjs.

Changed from:

<div class="tab-content">
    <div data-ng-view></div>
</div>

to:

<div class="tab-content" style="min-height: 500px">
    <div data-ng-view></div>
</div>

这篇关于如何禁用angularjs NG-视图$ anchorScroll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！