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 以某种方式对某些标准事件做出反应（例如，根据计时器或点击更改图像）。

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

然后在指令的控制器（或我认为的链接函数）中，您可以放入您的逻辑，就像您对任何业务类型控制器一样：

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

解决您对 DOM 的使用问题：

因此，在这里使用 ng-repeat 完全是矫枉过正。

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

虽然您说您不需要它，但您可能希望稍后在模板中放入一些 2 路数据绑定。如果不是图像本身，那么可能是图像的某些关联状态。说，放大，或其他一些基于“视图”的东西。如果您手动构建 DOM，这将更加棘手：我怀疑您必须调用 $compile。一切皆有可能，但您不妨创建一个模板，其中包含一些对$scope 变量的引用。

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