Question

我正在试图弄清楚这里的操作顺序，我显然失败了。

我正在尝试将jquery图库插件作为指令实现。该插件采用一组图像，使用$ .load将它们加载到DOM中，然后在完成后创建一个漂亮的图库。

您可以看到我的示例here。如果单击“加载图像”，它将从Flickr中提取20个图像。我想要发生的是，在加载时，调用$ .gridnav函数。当您单击“显示GridNav”时，我正在演示该功能，但显然不希望第二个按钮单击作为要求。

现在，我的指令位于我的ng-repeat之外，绑定到flickr成功回调时设置的属性。所以我理解为什么它不会被再次调用，我只是不知道如何做到这个功能，因为我喜欢。

Answer 1

我不完全确定gridnav应该如何工作，所以我不确定这是否完全有效，但是在数组发生变化的时候调用gridnav怎么办？您可以通过视图将数组传递给指令，然后在指令范围内将$watch传递给范围。

HTML：

<div class="well clearfix giftCardList tj_container" id="giftCardContainer"
     gridnav="giftCards">
  ...

JS：

link: function ($scope, element, attrs) {
  // watch for the value passed in to gridnav attribute to change
  $scope.$watch(attrs.gridnav, function(value){
    // don't do anything unless there's actually a value
    if (!value) return;
    // once it's changed, call gridnav on the next loop
    $timeout(function() {
      $(element).gridnav({
        rows: 1,
        navL: '#giftCard_prev',
        navR: '#giftCard_next',
        type: {
          mode: 'disperse',
          speed: 400,
          easing: '',
          factor: '',
          reverse: ''
        }
      }, 0);
    }, true);
  });
}

Plunker：http://plnkr.co/edit/lMYvIJEkEPRAaNIAuNvF?p=preview

AngularJS指令计时问题

1 个答案: