创建div后$ anchorScroll

时间:2017-03-23 09:01:43

标签: javascript jquery html angularjs anchor-scroll

使用$ 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

由于

1 个答案:

答案 0 :(得分:1)

在玩了你的plunker后,我发现更新angularJs的最新版本解决了这个问题。 我不知道你是否可以更新你的角度版本?

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