Question

我正在创建一个包装jCarousel插件的指令。但它的内容是通过ajax动态加载的。

以下是我的代码示例：

在HTML中调用指令：

<div class="jcarousel" dates-carousel dates="dates"></div>

其中dates - 我的一个服务通过ajax动态加载数组

指令

datesCarouselDirective = function() {
  return {
    restrict: "A",
    scope: {
      dates: "="
    },
    templateUrl: "...",
    link: function($scope, $element, $attrs) {
      var jcarousel = $element;
      jcarousel.on("jcarousel:reload jcarousel:create", function() {
        var width;
        width = jcarousel.innerWidth() / 3;
        return jcarousel.jcarousel("items").css("width", width + "px");
      }).jcarousel({
        wrap: "null"
      });
      $element.find(".jcarousel-control-prev").jcarouselControl({
        target: "-=1"
      });
      $element.find(".jcarousel-control-next").jcarouselControl({
        target: "+=1"
      });

      console.log($scope.dates); // returns []
      console.log($scope.dates.length);  // returns 0
    }
  };
};

指令模板：

<ul>
  <li>(ng-repeat="date in dates")
    {{date.format("MMM D")}}
  </li>
</ul>
<a class="jcarousel-control-prev">
  <i class="fa fa-angle-left"></i>
</a>
<a class="jcarousel-control-next">
  <i class="fa fa-angle-right"></i>
</a>

因为dates内部指令等于[]（在我看来，ajax加载日期晚于指令变为渲染）我的jCarusel无法正常工作。有人可以帮我解决这个问题，并告诉我如何使我的指令正常工作，如果需要可能重构我的指令？

Answer 1

我想我已经找到了一些决定。在我的link函数中，我使用$watchCollection找出dates何时变为非空数组，然后调用jCarusel ...也许这是一个很糟糕的出路，但它适用于我

  link: function($scope, $element, $attrs) {
    return $scope.$watchCollection('dates', function() {
      var jcarousel;
      if ($scope.dates.length) {
        jcarousel = $element;
        jcarousel.on("jcarousel:reload jcarousel:create", function() {
          var width;
          width = jcarousel.innerWidth() / 3;
          return jcarousel.jcarousel("items").css("width", width + "px");
        }).jcarousel({
          wrap: "null"
        });
        $element.find(".jcarousel-control-prev").jcarouselControl({
          target: "-=1"
        });
        $element.find(".jcarousel-control-next").jcarouselControl({
          target: "+=1"
        });
      }
    });
  }

有人有更好和正确的解决方案吗？

指令中ng-repeat和ajax加载内容的问题

1 个答案: