0

我正在 AngularJS 中构建一个具有无限滚动 UI 的复杂可变布局。

想想像 Flipboard 这样的带有大量重复数据项的东西，每个项都包含相同的内容（标题、描述、图像等）。每个项目都预加载到 JSON 中，排序然后组织成一系列页面，从一系列可变布局中选择。每页有可变数量的列，每列有可变数量的行。

为了实现这一点，我为每个页面布局使用多个指令，在运行时编译。在每个布局指令中，我构建了可变数量的列，每个列都包含一个用于可变行数的 ng-repeat。每行可以是一个不同的指令，这取决于它需要如何设置样式。同样，所有这些都发生在运行时。

我已经完成了 99% 的路程。

指令正在正确编译并调用正确的列指令，这反过来又编译了正确的行数。一旦我们到达行/项目级别，我正在使用一个服务，它为每个项目带回正确的指令。我选择服务方法的原因是我希望在其他模块中重复使用这些项目。

我遇到的问题是，一旦编译了页面布局，它就会设置列，然后设置行，但不执行 ng-repeat。我需要让 ng-repeat 循环并调用我为每个项目使用的特定指令。

我认为这与 $compile 以及 Angular 对 DOM 的了解有关。也许我需要在某个阶段执行 $compile 或 $apply 以让 ng-repeat 启动并将最终指令绑定到数据项。

**

旁注：如果我不使用服务，而只需使用 templateUri 定义每个布局指令，它就可以完美运行！

我可以采用这种方法，但理想情况下，我不想在运行时下载一堆模板。此外，通过将参数传递给服务，我可以设计更多的布局，比构建单独的模板文件更快、更容易。

我已经设置了一个 JS fiddle，其中包含我如何处理所有这些的快速示例：

http://jsfiddle.net/joecarney/vE3Ls/6/

一些 SO 需要代码才能发布此评论： 

<div ng-app="app" ng-controller="appPageController">
    <div>
        <div my-page></div>
    </div>
</div>
4

1 回答 1

0

如果您scope: {}在指令中使用它会创建一个新范围，因此除非您允许，否则您的指令将无法访问控制器范围，您开始这样做但似乎您随后为所有人复制并粘贴了相同的内容:)

在 ng-repeat 中编译项目的指令无法访问项目。我从指令中删除了范围并使用 attrs 值来访问属性

http://jsfiddle.net/vE3Ls/7/

于 2013-08-23T12:40:33.123 回答