Angularjs 使用指令在预览模板和编辑模板之间切换

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

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

下面是提要模板的简化版本：

<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.content}}

{{file.name}
编辑

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

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

---

我曾考虑过在单击编辑链接时将

元素更改为

，但这似乎不对（我也不知道如何在角度上这样做）。

在这里猜测，不确定它是否有效

您可以让feedpost使用ng switch语句，然后在每个post上设置scope-level变量以确定要包含的模板。我使用了ng 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>

{{post.content}}

{{file.name}
编辑

哦，是的，我没有想到使用ng-switch。对不起，我无意中点击了return，不知怎的，我花了5分钟才完成我的评论。。。它起作用了。我刚刚将您的实现改为使用指令，并在PostTRL中创建了一个

toggleEditMode

函数，这样我就可以通过ng单击在模式之间切换来调用它。谢谢你的帮助。

<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>