javascript - jquery内部的 Angular 函数需要双击才能调用

Question

我只是在 Angular 函数中使用了 jquery 并尝试通过 ng-click 调用。它工作正常，但我总是需要第二次单击按钮来调用该函数

这是我的函数调用语句

<button type="button" class="btn btn-primary showRest" id="btnShow" ng-click="loadHotels()">Show Restaurants</button>  

这是我的 Angular 函数，它调用服务，如果成功，它会滚动到 div

$scope.loadHotels = function() {
  $scope.setPlace();
  if (p != null) {
    $http({
        method: 'POST',
        url: 'http://localhost/fudline/access/hotels/loadhotelsfromplace',
        data: $httpParamSerializerJQLike({
          place: p
        }),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
      .success(function(data, status, headers, config) {
        $scope.hotels = data;
        $(".showRest").click(function() {
          $('html,body').animate({
              scrollTop: $(".hotels").offset().top
            },
            'slow');
        });
      }).error(function(data, status, headers, config) {
        //
      });
  }


}

<button type="button" class="btn btn-primary showRest" id="btnShow" ng-click="loadHotels()">Show Restaurants</button>

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

这是要走的部分...

<div class="container text-center hotels">    
   <h3>Trending Restaurants</h3>
</div>

Answer 1

您正在成功回调中绑定(bind)点击事件处理程序，因此它在第一次点击时不起作用。

您不需要事件处理程序，摆脱它。

.success(function (data, status, headers, config) {
    $scope.hotels = data;
    $('html,body').animate({
        scrollTop: $(".hotels").offset().top
    }, 'slow');
})