Question

我正在努力让jQuery backstretch与AngularJS合作。我知道AngularJS也有后伸叉，但现在我无法使用jQuery，我想了解原因。那么，让我们开始使用代码。这是我的观点

<div ng-controller="main" ng-init="images=[];index=0;">
  <div id="bs" ng-swipe-right="nextImage()" ng-swipe-left="prevImage()" style="position: relative;">
    <div id="bslist" style="position: absolute; bottom: 10px; text-align: center;
         left: 0px; right: 0px;" class="bg-stretch">
      <span ng-repeat="image in images">
        <a href="#" ng-class="{'active':isCurrentImageIndex($index)}"
           ng-click="setCurrentImageIndex({{$index}});">{{$index}}</a></li>
      </span>
    </div>
  </div>
</div>

（我知道在这里设置样式并不好，但它仅适用于测试，我不想将其嵌入到我的CSS中）

我的想法是，一旦我通过后伸到#bs进入图像列表，我可以通过向左或向右滑动（有效）或通过点击链接标签所做的列表来更改它们（这不是不行。此外，backstretch确实有效的动画更改。单击不起作用，因为当我单击时，控制器将重新启动，#bs中的图像将被重置。相应地，索引在任何点击后总是为0。后端总是随机播放图像列表。

这是我的控制器

app.controller('main', ['$scope', '$http', function($scope, $http) {
    $http({
      method: 'get',
      url: 'rest/bg'
    }).success(function(data) {
      console.log('Loaded images');
      $scope.images = data.images;
      $scope.index = 0;
      var height = $($($('#bs').parent()).parent()).height();
      $('#bs').css('height', height);
      $('#bs').backstretch($scope.images, {duration: 2000, fade: 700});
      $(window).on("backstretch.after", function(e, instance, index) {
        $scope.$apply(function() {
          console.log('running scope');
          console.log(index);
          $scope.index = index;
        });
      });
    });
    $scope.prevImage = function() {
      $scope.index = $scope.index === 0 ? $scope.images.length - 1 : $scope.index - 1;
      $('#bs').backstretch("show", $scope.index);
    };
    $scope.nextImage = function() {
      $scope.index = $scope.index === ($scope.images.length - 1) ? 0 : $scope.index + 1;
      $('#bs').backstretch("show", $scope.index);
    };
    $scope.isCurrentImageIndex = function(index) {
      return $scope.index === index;
    };
    $scope.setCurrentImageIndex = function(index) {
      $scope.index = index;
      $('#bs').backstretch("show", $scope.index);
    };
  }]);

试图了解angularjs服务和$ http

0 个答案: