2017-03-23 1 views
1

J'ai un problème avec $ anchorScroll. J'ai un div avec une condition ng-ig qui n'est pas visible au début. J'ai besoin d'utiliser la fonction $ anchorScroll pour aller dans ce div quand on clique sur un bouton. Ce bouton rend également la div visible. À l'heure actuelle ne fonctionne pas parce que je pense qu'il déclenche le $ anchorScroll avant que le div est créé. Voici le code:

<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> 

et la partie angulaire

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

Merci

+0

Il ne va pas à ce moment-là parce que quand vous appelez 'location.hash' de $, il est de recharger la page, lorsque vous cliquez sur la deuxième fois que cela fonctionne parce qu'il ne doit pas modifier la page. Je ne sais pas comment y remédier, mais j'espère que cela vous aidera à chercher une réponse. Si vous avez des routes [cette réponse] (http://stackoverflow.com/questions/21701675/change-pages-location-hash-in-angularjs-app-without-page-reloading) peut être utile – George

+0

@George vous pensez il n'y a pas de réponse à cette question? –

+0

@sameer Je ne comprends pas ce que vous avez changé .. Vous venez d'enlever quelques
? –

Répondre

1

Après avoir joué avec votre plunker, j'ai trouvé que la mise à jour pour AngularJS la dernière version a résolu le problème. Je ne sais pas si vous pouvez mettre à jour votre version angulaire?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>