jquery - AngularJS 指令 - 避免 jQuery 式架构

Question

我正在尝试为图库创建一个指令，类似于 Windows 8 中的 People 磁贴。意思是 - 该指令将在匹配的 2x2 或 3x3 网格内随机交换图像(取决于图片数量)。为了这个问题的简单起见，我们假设总是有足够的图像可以交换并且没有重复。

画廊必须针对视觉性能进行高度优化 - 到目前为止，我已经设法将其精简为单个 CSS 操作并重新渲染(而不是单个 DOM 重排!)。因此，在这里使用 ng-repeat 完全是矫枉过正。

这个指令也是一个“一劳永逸”的指令。这意味着模型不会更改，并且需要在图库中删除或添加项目。所以这里真的不需要像 ng-repat 这样的东西。

现在我的 HTML 看起来像这样(对于 2x2 磁贴):

<div> <!-- link $element -->
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</div>

当然，我正在努力将画廊 DOM 添加到磁贴中，当然是在链接功能内。现在我正在生成图像并将它们附加到容器 div:

var images = [],
     $img;
 for (var i = 0; i < gallerySize; i++) {
     $img = $('<img>').appendTo($el);
     images.push($img);
 }

我的定时器循环负责交换图像。我只担心如果我的模板变得更复杂，或者如果我引入一些需要我更改模板的 CSS 动画怎么办。感觉这正在偏离“The Angular Way”。我在这里给自己找麻烦吗？谢谢

Answer 1

我认为您似乎没有使用的主要内容是指令定义中的模板。事实上，除非你真的需要，否则你通常不需要在指令中手动触摸 DOM，特别是如果你所做的只是使用指令放入一些 HTML 以某种方式对某些标准事件作出 react (例如，根据计时器或点击更改图像)。

<div class="gallery">
  <img ng-repeat="image in images" ng-src="{{image.src}}" />
</div>

然后在指令的 Controller 中(或者我认为是链接函数)，你可以放入你的逻辑，就像你对任何业务类型的 Controller 所做的那样:

$scope.swapImage = function(i) {
  // Do something
}

解决您对 DOM 的使用:

Therefore, using ng-repeat is totally overkill here.

除非您在任何时候屏幕上都有 100 秒(/1000 秒？)的图像，否则我会使用 Angular 的功能:模板，带有 Controller 和指令，例如 ng-repeat，而不是手动 DOM 操作。这是“Angular Way”:对于更复杂的模板，它应该不那么脆弱，并且通常更清晰，因为您有一个模板可以准确解释 html 将是什么，而不是将它稍微隐藏在几行代码中。

虽然您说您不需要它，但您稍后可能想在模板中加入一些 2 种方式的数据绑定(bind)。如果不是图像本身，那么可能是图像的一些相关状态。比如说，放大，或者其他一些基于“ View ”的东西。如果您手动构建 DOM，这将更加棘手:我怀疑您将不得不调用 $compile 。一切皆有可能，但您还不如创建了一个模板，其中包含一些对 $scope 变量的引用。

此外:我看到您在示例中有一个 id 属性。使用它们可能非常不符合 Angular ，因为它实际上是一个全局标识符，并且可能意味着您不能同时在同一页面上拥有不同的画廊实例。