Question

：）

我正在尝试使用带有Angular.js指令的“owl carousel”jquery插件，这是html示例（http://owlgraphic.com/owlcarousel/demos/images.html）

<div id="owl-demo">
 <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
 <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
 <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
 <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
</div>

使用简单的Jquery Owl Carousel运行：

 $("#owl-demo").owlCarousel();

现在，我正在尝试使用Angular.js使用此指令：

'use strict';

angular.module('MyApp')
  .directive('inccarousel', () ->
    restrict: "A"
    link: (scope, element, attrs) ->
      $(element).owlCarousel()
  )

这个角度观点：

<div inccarousel>
        <p inccarousel ng-repeat="foo in foobar">{{ foo }}</p>
</div>

但它不起作用，当我查看html输出时，我得到了这个：

....
<div inccarousel="" style="opacity: 0;">
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">1</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">2</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">3</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">4</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">5</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">6</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">7</p>
</div>
....

任何人都可以帮忙吗？：（

Answer 1

我找到了解决方案：D 只需简单地添加到指令inccarousel：

scope.$watch attrs.list, ->
        $(element).owlCarousel()

但它不适用于动态加载的内容（ajax）。 :( 我快要了......

Answer 2

我已经挣扎了这么久了。

似乎无法将其与ng-repeat一起使用。

但是，您可以使用数据的forEach循环自行修改DOM。

一个例子：

newCarSearchApp.directive('slyCarousel', function() {

return {
  restrict: 'E',
  replace: true,
  templateUrl: '/templates/carouselTemplate.html',

  link: function(scope, element, attrs) {

        angular.forEach(scope.slides, function(value, key){
          $('#owl-example').append("<div>"+value+"</div>");
        });

        $("#owl-example").owlCarousel();   
  }
}
})

然后你确保它不会运行，直到数据通过使用承诺通过AJAX传输完毕或者用ng-if="ajaxComplete"自己破解它，这个重要的代码行为我解决了这个问题。

我如何使用带有angular.js指令的owl轮播？

2 个答案: