1

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

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

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

现在，我的指令位于我的 ng-repeat 之外，它绑定到从 flickr 成功回调时设置的属性。所以我明白为什么它不再被调用了，我只是不知道该怎么做才能使这个功能如我所愿。

4

1 回答 1

3

我不完全确定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

于 2013-05-06T16:33:20.160 回答