Question

我使用ng-repeat打印来自Feed的帖子：

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

这是feedpost指令：

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

以下是Feed帖子模板的简化版本：

<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模板，以便在单击编辑链接时编辑帖子（反之亦然，在提交编辑时）。< / p>

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

我想在点击编辑链接时将<feedpost>元素变为<editfeedpost>，但这看起来并不正确（而且我不确定如何处理无论如何都要做角度。）

Answer 1

这里有受过教育的猜测，不确定它是否有用。

您可以让您的Feedpost使用ng-switch语句，然后在每个帖子上设置范围级别变量以确定要包含的模板。我使用了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>

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

1 个答案: