AngularJS指令计时问题答案

【问题标题】：AngularJS directive timing issueAngularJS指令计时问题
【发布时间】：2013-05-06 16:05:47
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案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

【讨论】：