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

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

下面是我的代码示例：

HTML中的调用指令：

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

<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>

指令模板：

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

<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>

（ng repeat=“日期中的日期”）
{{date.format（“mmmd”）}

---

因此，由于

日期

inside指令等于

[]

（在我看来，ajax加载日期比指令变成渲染日期晚），我的jCarusel无法正常工作。有人能帮我解决这个问题，告诉我如何使我的指令正常工作，如果需要的话，还可以重构我的指令吗？

我想我已经找到了一些决定。在我的

链接

函数中，我使用了

$watchCollection

来找出

日期

何时变为非空数组，然后调用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"
        });
      }
    });
  }

有没有人有更好、合适的解决方案