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();
    });
};

（両方ではなく片方だけ）

それが役に立ったことを願っています。

EDIT : 非表示の div に移動できないことを確認してください。コメントで言ったように、anchoscroll() を実行しようとすると、ng-show が true と評価される場合があります。

これは、 ng-show なしで動作するplunkerです。ng-show の問題を回避するための小さなソリューションを構築します。

この副作用を避けるために、別の div で ng-show を使用して div をラップしました。

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