CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsanchor-scroll
Atlas91
Atlas91

Reputation: 5904

$anchorScroll after div is created

I've got a problem using $anchorScroll. I've got a div with an ng-ig condition that isn't visible at the beginning. I need use the $anchorScroll function to go in that div when a button is clicked. This button also make the div visible. Right now doesn't work because i think it fires the $anchorScroll before the div is created. This is the 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>

and the angular part

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

Thanks

Upvotes: 1

Views: 212

Answers (1)

remborg
remborg

Reputation: 548

After playing around with your plunker, I've found that updating angularJs for the latest version fixed the problem. I don't know if you can update your angular version?

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

Upvotes: 1

Related Questions