使用ng-repeat时，弹性滑块无法正常工作

Flexslider not working properly when using ng-repeat

本文关键字：常工作 工作 ng-repeat 使用      更新时间：2023-09-26

我在使用 flex 滑块时遇到了问题，因为如果我使用 ng-repeat，它会停止工作。否则它工作正常。

myApp.controller('frontCtrl', function ($scope) {
  var results = {"id":4,"title":"sddddddd", "photos":[{"url":"http://placekitten.com/g/400/200","id":1},{"url":"http://placekitten.com/g/400/200","id":2}]};
  $scope.images=results.photos
});
myApp.directive('flexslider', function () {
  return {
    link: function (scope, element, attrs) {
      element.flexslider({
        animation: "slide"
      });
    }
  }
});

.HTML

    <div class="flexslider" flexslider>
      <ul class="slides">
        /* This wont work*/
        <li ng-repeat="img in images">
          <img src="{{img.url}}">
        </li>

          /* This work*/
        <li>
          <img src="http://placekitten.com/g/400/200">
        </li>
        <li>
          <img src="http://placekitten.com/g/400/200">
        </li>
        <li>
          <img src="http://placekitten.com/g/400/200">
        </li>
      </ul>
    </div>

我已经在 plunker http://plnkr.co/edit/P2AOwQY0fQSMSXUQbc9t?p=preview 中重新创建了这个问题

由于某种原因，该指令对我不起作用，因此经过长时间的试验和错误，我想出了以下内容：

function startSlideShow() {   
    jQuery('.slideshow').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 240,
        controlNav: false
    });
    jQuery('#menu-section a.dropdown-toggle').click(function () {
        jQuery('#menu-section .dropdown-menu').toggle();
    })
}
只需在加载

完所有内容后调用它（我的图像来自运行时加载的 URL）：

setTimeout( startSlideShow, 10)

您必须延迟弹性滑块，直到呈现指令中的所有内容。您可以使用$timeout服务：

myApp.directive('flexslider', function ($timeout) {
  return {
    link: function (scope, element, attrs) {
      $timeout(function(){
        element.flexslider({
          animation: "slide"
        });
      })
    }
  }
});

见普罗提。

相关文章：