带模板的角度重复？

Question

我目前正在尝试弄清楚如何在 Angular 中使用模板。目前，我正在使用 ui.router (angular-ui-router) 但我找不到关于如何使用模板语言嵌入子模板视图的好的文档，特别是与不同的重复元素有关模型实例。

背景：

我基本上是将静态本地文件系统图像上传器/管理器转换为与亚马逊 S3 一起使用。背景要点已经解决了，现在我正在尝试通过将其从 10 年的 javascript 转换为 angular.js 来改进 UI 本身。我让它为一个一体化的 html 页面“工作”，但更愿意对其进行模块化以使其更具动态性。

上下文：

我通过 s3 客户端从对 AWS sdk 的 listObjectsV2() 调用返回给定前缀下的对象列表。我解析结果以将其分解为一个伪目录树，然后一次显示一个目录，从前缀之后的 [virtual] 根目录开始。 （仅供参考，前缀是用户 ID）

我构建了一个 UserDir 对象，该对象使用 PseudoDir 子对象来定义一个虚拟目录，其中包含“subdirs”（代表虚拟子目录的更多 PseudoDir 对象）和“images”（一种类型的图像文件的 S3 对象）的数组属性或其他）。

我想为任何给定的“当前”目录（例如“”或用户根目录）首先显示每个 curDir.subdirs 的文件夹图标列表，然后是每个 curDir.images 的缩略图图标。

问题： 我已经从一个 html 文件中进行了这项工作，甚至设法弄清楚了如何使用 ui.router 为主页创建一个。现在我想对其进行模块化，以便一个不同的控制器处理文件夹图标/信息行为，另一个处理图像图标/行为。

即我已经开始构建一个“FolderController”和一个“ImageController”，并希望 ngRepeat 用于“curDir.images 中的图像”，例如，用它自己的模板调用一个状态，但我似乎找不到一个关于如何这样做。

这是当前的一体化模板代码。但我想将每个子块移动到具有 templates/folder.html 模板的 FolderController 的状态和具有 templates/image.html 的 ImageController 的状态，但似乎找不到如何编写语法的示例：

        <!-- folders -->
        <div ng-repeat="(folder, pDir) in subdirs" ng-controller="FolderController" ng-init="folderName=folder;awsObject=pDir">
            <div id="{{folderName}}" class="Item">
                <div class="Icon ui-draggable ui-draggable-handle">
                    <img id="{{folderName}}Icon" src="../../images/folder.png">
                </div>
                <div id="{{folderName}}Desc" class="Description">
                    <span id="{{folderName}}Name" class="filename" title="{{folderName}}/">{{folderName}}/</span>
                </div>
            </div>
        </div>

        <!-- images -->
        <div ng-repeat="(filename, uImage) in images" ng-controller="ImageController" ng-init="uImage=uImage">
            <div id="image{{uImage.hash}}" class="Item">
                <div class="Icon ui-draggable ui-draggable-handle">
                    <img id="icon{{uImage.hash}}" ng-src="{{ uImage.thumbSrc }}"></div>
                <div id="desc{{uImage.hash}}" class="Description">
                    <span id="name{{uImage.hash}}" class="filename" title="{{filename}}">{{filename}}</span>
                    <img id="thumb{{uImage.hash}}" src="../../images/tick_image-services.png" class="Check Right" ng-show="uImage.usedInLayout" title="Used in layout"><br />
                    <span id="date{{uImage.hash}}" ng-show="(uImage.mtime > 0)">Date uploaded: {{ uImage.mtime | date: 'EEE MMM dd yyyy' }}</span><br />
                    <span id="size{{uImage.hash}}" ng-show="(uImage.size > 0)">Size: {{ uImage.size | humanizeBytes }}</span><br />
                    <span id="dims{{uImage.hash}}" ng-show="((uImage.width > 0) && (uImage.height > 0))">Dimensions: {{ uImage.width }} x {{ uImage.height }} pixels</span><br />
                    <span id="aspect{{uImage.hash}}" ng-show="(uImage.aspectRatio)">Aspect Ratio: <span class="AspectRatio">{{ uImage.aspectRatio }}</span></span><br />
                </div>
            </div>
        </div>

Answer 1

您可以创建两个组件，一个用于文件夹，一个用于图像，官方文档见here。

草稿如下：

angular.module('myApp').component('images', {
  templateUrl: 'imageList.html',
  bindings: {
    images: '='
  }
});

imageList.html:

<div ng-repeat="(filename, uImage) in images" ng-controller="ImageController" ng-init="uImage=uImage">
            <div id="image{{uImage.hash}}" class="Item">
                <div class="Icon ui-draggable ui-draggable-handle">
                    <img id="icon{{uImage.hash}}" ng-src="{{ uImage.thumbSrc }}"></div>
                <div id="desc{{uImage.hash}}" class="Description">
                    <span id="name{{uImage.hash}}" class="filename" title="{{filename}}">{{filename}}</span>
                    <img id="thumb{{uImage.hash}}" src="../../images/tick_image-services.png" class="Check Right" ng-show="uImage.usedInLayout" title="Used in layout"><br />
                    <span id="date{{uImage.hash}}" ng-show="(uImage.mtime > 0)">Date uploaded: {{ uImage.mtime | date: 'EEE MMM dd yyyy' }}</span><br />
                    <span id="size{{uImage.hash}}" ng-show="(uImage.size > 0)">Size: {{ uImage.size | humanizeBytes }}</span><br />
                    <span id="dims{{uImage.hash}}" ng-show="((uImage.width > 0) && (uImage.height > 0))">Dimensions: {{ uImage.width }} x {{ uImage.height }} pixels</span><br />
                    <span id="aspect{{uImage.hash}}" ng-show="(uImage.aspectRatio)">Aspect Ratio: <span class="AspectRatio">{{ uImage.aspectRatio }}</span></span><br />
                </div>
            </div>

您的原始 html 将如下所示：

<!-- folders -->
<div ng-repeat="(folder, pDir) in subdirs" ng-controller="FolderController" ng-init="folderName=folder;awsObject=pDir">
    <div id="{{folderName}}" class="Item">
        <div class="Icon ui-draggable ui-draggable-handle">
            <img id="{{folderName}}Icon" src="../../images/folder.png">
        </div>
        <div id="{{folderName}}Desc" class="Description">
            <span id="{{folderName}}Name" class="filename" title="{{folderName}}/">{{folderName}}/</span>
        </div>
    </div>
</div>

<image-list [images]="images" ></image-list>

编辑 这是一个example plunker，它显示了一个组件的简单实现，其中包含数据绑定和 ng-repeat，不需要 ui-router 来满足您的要求。请注意，我上面写的 html 是你写的内容的拙劣复制粘贴 - 所以双重 ng-repeat 是一个错误，更新了 html。