1

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

听到是我的代码。

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 标签的标签。但它仍然没有工作。

4

1 回答 1

4

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

ng-click="searchCtrl.gotoTable()"

而在您的控制器中，您希望拥有一个：

self.gotoTable = function(resultTable)

尝试这样的事情

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

或这个 ：

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

（只有一个，不是两个）

希望它有所帮助。

编辑：很确定你不能去隐藏的 div。正如我在评论中所说，当您尝试锚滚动（）时，您的 ng-show 可能会被评估为真。

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

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

<div id="resultTable">
 <div class="rtable" ng-show = "searchCtrl.tableViewData.length > 0">
</div>
于 2015-09-04T12:53:57.777 回答