$anchorScroll 在 AngularJs 中不起作用答案

【问题标题】：$anchorScroll is not working in AngularJs$anchorScroll 在 AngularJs 中不起作用
【发布时间】：2016-12-03 07:50:38
【问题描述】：

我正在开发一个提交表单并从服务器获取结果的应用程序，然后是 HTML 表格视图。我的输入表单有点大，覆盖了整个屏幕。当表格出现时，我想在表格视图中自动向下滚动。我使用了来自 angularJs 的 $anchorScroll。但我无法达到我想要的结果。我还使用了 $timeout 来确保表是否已经存在，然后执行 $anchorScroll，但仍然没有成功。（基于此解决方案：Using $location and $anchorScroll to scroll a table row into view

听到的是我的密码。

HTML

<div data-ng-controller="searchController as searchCtrl" id="scrollArea">
    <form>
       //HTML input elements

       <div class="buttons">
           <md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button>
       </div>
    </form>
</div>

<!-- Smart Table for displaying result -->
<div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">

//table content

</div>

控制器

angular.module('myApp')

.controller("searchController", function($log, searchService, $scope, $location, $anchorScroll, $timeout){
    var self = this;

 self.gotoTable = function(resultTable) 
    {
        $timeout(function() {
            $location.hash(resultTable);
            $anchorScroll();
        });
    };

});

我不知道为什么它不起作用？

我需要在我的 CSS 中定义 id scrollArea 和 resultTable 吗？

任何帮助将不胜感激。提前致谢。

更新

基于 Okazari 的解决方案，我尝试在 HTML 的最底部放置一个带有许多 br 标签的另一个 div。现在，当我刷新页面时，它会自动滚动到该 div 标签，而无需单击“开始”。这有点奇怪。我也试图覆盖

 <div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0" id="resultTable">

带有另一个 id = "resultTable" 的 div 标签的标签。但它仍然没有工作。

【问题讨论】：

您的控制器中的resultTable 是什么？您是否仅在 # 上测试过 $anchorScroll() 以查看是否有效？
@JoeLloyd ：resultTable 是表的 id。您可以在 HTML 中看到倒数第二个
。我要显示的这张表。
你能尝试重现你的问题 fork my plunker 吗？
抱歉，由于格式原因，更新描述令人困惑。我已经更新了。
@Okazari ：不，我只是从 plunker 复制了您的代码并尝试了。我认为整个问题是由于对服务器的获取和发布请求。

【解决方案1】：

你实际上是在没有任何参数的情况下调用你的函数

ng-click="searchCtrl.gotoTable()"

而在你的控制器中你希望有一个：

self.gotoTable = function(resultTable)

试试这样的

ng-click="searchCtrl.gotoTable('resultTable')"

或者这个：

self.gotoTable = function() 
{
    $timeout(function() {
        $location.hash("resultTable");
        $anchorScroll();
    });
};

（只有一个，不是两个）

希望对您有所帮助。

编辑：很确定你不能去一个隐藏的 div。正如我在评论中所说，当您尝试 anchorscroll() 时，您的 ng-show 可能会被评估为 true。

这是一个没有 ng-show 的工作 plunker。我将构建一个小解决方案来避免 ng-show 问题。

为了避免这种副作用，我用 ng-show 将 div 包裹在另一个 div 中。

<div id="resultTable">
 <div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0">
</div>

【讨论】：

是的，我一个一个地尝试了这两个选项。但它仍然无法正常工作......:(
@HarshSoni 我想我对这个问题有所了解。您实际上不能将滚动锚定到隐藏的 div。直到您在要滚动到的 div 上有一个 ng-show 。当锚滚动触发时，ng-show 可能被评估为 true
嘿，我尝试用 id 覆盖 div 标签，但仍然无法正常工作。我已经更新了这个问题。请通过它。谢谢。
不是很有帮助。我已经在控制器中注入了 $anchorScroll。 HTML : ** **Controller : $scope.testFunc = function(){ $anchorScroll( );我正在使用这个 md-calendar 指令。