2017-03-23 11 views
1

$ anchorScrollを使用して問題が発生しました。私は最初に表示されていないng-ig条件のdivを持っています。 $ anchorScroll関数を使用して、ボタンをクリックするとそのdivに移動する必要があります。このボタンでもdivが表示されます。 divが作成される前に$ anchorScrollが発生すると思うので、今は機能しません。これはコードです:

<body ng-app="testApp" data-ng-controller="searchController as searchCtrl" > 

    <div id="scrollArea"> 
     <form> 
     //HTML input elements 

     <div class="buttons"> 
      <md-button class="md-primary md-raised" ng-click="searchCtrl.gotoTable('resultTable')">Start</md-button> 
      {{searchCtrl.test}} 
     </div> 
     </form> 
    </div> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <!-- Smart Table for displaying result --> 
    <div id="resultTable" class="rtable"> 
    <div ng-if="searchCtrl.test == true" > 
     //table content 
    </div> 
    </div> 

</body> 

と角部

var app = angular.module('testApp', []); 

app.controller("searchController", function($scope, $location, $anchorScroll, $timeout){ 
    var self = this; 
    self.test = false; 

self.gotoTable = function(resultTable) 
    { 
     self.test = true; 
     self.anchor(resultTable); 
    }; 

    self.anchor = function(resultTable) { 
    $location.hash('resultTable'); 
    $anchorScroll(); 
    } ; 
}); 

Plunker:http://plnkr.co/edit/HrdN2ZACDui61l1kPHEj?p=preview

おかげで、あなたのplunkerで遊んでた後、私はのためにangularJsを更新することを

+0

$ location.hashを呼び出すと、ページを変更する必要がないため、2回目にクリックすると、ページをリロードしているので、それはその時点にはなりません。私はそれを修正する方法を知らないが、うまくいけば、これはあなたが答えを検索するのに役立ちます。あなたがルートを持っているなら[この回答](http://stackoverflow.com/questions/21701675/change-pages-location-hash-in-angularjs-app-without-page-reloading)が役に立つかもしれません – George

+0

@Georgeあなたは思いますこの質問に答えはありませんか? –

+0

@sameerあなたが変更した内容を理解できません。
を削除しましたか? –

答えて

1

を見つけました最新のバージョンで問題が修正されました。 角度バージョンを更新できるかどうか分かりませんか?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
関連する問題