2

我使用 ng-repeat 从提要中打印出帖子：

<div ng-ctrl="feedCtrl">
    <feedpost ng-repeat="post in posts"></feedpost>
</div>

这是 feedpost 指令：

.directive('feedpost', function () {
    return {
        restrict: 'E',
        templateUrl: '/views/feed/post.html'
    }
}

这是提要帖子模板的简化版本：

<div class="feedPost">
    <p>{{ post.content }}</p>
    <div>
        <div class="file" ng-repeat="file in post.files">{{ file.name }}</div>
    </div>
    <a ng-click="editPost()">Edit</a>
</div>

我想要实现的是将 post.html 模板替换为包含表单的 editPost.html 模板，以在单击编辑链接时编辑帖子（提交编辑时反之亦然）。

我一直在谷歌搜索一段时间试图找到解决方案。我所能找到的只是人们使用隐藏表单和 ng-show/hide，但如果有更好的方法，我不愿意让一个提要充满隐藏表单。

我想过在单击编辑链接时将<feedpost>元素更改为 a <editfeedpost>，但这似乎不正确（而且我不确定如何以角度方式进行操作）。

4

1 回答 1

2

这里有根据的猜测，不确定它会起作用。

您可以让您的 feedpost 使用 ng-switch 语句，然后在每个帖子上设置范围级别变量以确定要包含的模板。我使用 ng-switch 是因为它只包含满足 switch 条件的 html。

这将是您的指令模板：

<ng-switch on="post.viewMode">
    <ng-switch when="post" ng-include="'/views/feed/post.html'">
    <ng-switch when="edit" ng-include="'/views/feed/edit.html'">
</ng-switch>

这将是 post.html。请注意，我使用 $parent 来说明 ng-include 创建新范围。

<div class="feedPost">
    <p>{{ post.content }}</p>
    <div>
        <div class="file" ng-repeat="file in post.files">{{ file.name }}</div>
    </div>
    <a ng-click="post.$parent.viewMode = 'edit'">Edit</a>
</div>
于 2013-06-28T18:35:35.040 回答