2017-03-23 6 views
1

Ich habe ein Problem mit $ anchorScroll. Ich habe ein Div mit einer ng-ig-Bedingung, die am Anfang nicht sichtbar ist. Ich brauche die Funktion $ anchorScroll, um in dieses div zu gehen, wenn auf eine Schaltfläche geklickt wird. Diese Schaltfläche macht auch das div sichtbar. Im Moment funktioniert das nicht, weil ich denke, dass es den $ anchorScroll auslöst, bevor das div erstellt wird. Dies ist der 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> 

und der Winkelteil

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

Dank

+0

Es ist nicht zu diesem Punkt gehen, weil, wenn Sie anrufen '$ location.hash' es um die Seite neu zu laden ist, wenn Sie es das zweite Mal klicken, um es funktioniert, weil es nicht die Seite wechseln muss. Ich weiß nicht, wie ich es beheben kann, aber hoffentlich hilft es dir, nach einer Antwort zu suchen. Wenn Sie Routen haben [diese Antwort] (http://stackoverflow.com/questions/21701675/change-pages-location-hash-in-angularjs-app-without-page-reloading) kann nützlich sein – George

+0

@George Sie denken Es gibt keine Antwort auf diese Frage? –

+0

@sameer Ich verstehe nicht, was Sie geändert haben .. Sie haben gerade einige
entfernt? –

Antwort

1

Nach dem Spielen mit Ihren Plunker, ich habe dass AngularJS für die Aktualisierung gefunden Die neueste Version behebt das Problem. Ich weiß nicht, ob Sie Ihre eckige Version aktualisieren können?

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