2

我有一个问题，我最近发现自己很着迷，看，我现在非常需要你告诉我解决问题的方法。

我的业务任务是创建一个帖子列表，其中包含对每个帖子的评论。每个帖子都有 3 种状态：查看、编辑和删除。

我创建了指令Post和Comment。我还创建了PostList和CommentList指令来管理帖子和评论。帖子和评论是相似的代码： http ://plnkr.co/edit/k77kdSwPnqY4jR5EY7N4?p=preview

app.directive("Post", function ($templateCache, $compile) {
    function getTemplate(mode) {
        switch (mode) {
            case "create":
                return "createPost.html";
            case "view":
                return "viewPost.html";
            case "delete":
                return "deletePost.html";
        }
    }

    var defaultMode = "view";

    return {
        scope: {},
        restrict: "AE",
        compile: function (elem, attrs, transclude) {
            return function ($scope, $element, $attr) {
                function updateTemplate() {
                    $element.html("");
                    $compile($templateCache.get(getTemplate($scope.mode)).trim())($scope,   function (clonedElement, scope) {
                        clonedElement.appendTo($element);

                    });
                }

                $scope.mode = $attr.mode || defaultMode;

                $scope.$watch("mode", updateTemplate);
            }
        }
    }
})

每个模板（例如viewPost.html）都有很多绑定和指令，例如ng-show、ng-src、ng-bind-html-unsafe。viewPost.html包含 commentList 指令，负责显示评论列表。当我编译一篇文章时，这篇文章的每条评论的编译都会自动启动。

这是指令树： 指令树

当我想呈现一个包含 20 个帖子的列表时，每个帖子都有几条评论，我在工作完成之前等待超过一秒钟。在此期间网页没有响应。

我组织这种结构的方式是否正确？Angular 是否适合这项业务任务？

我确实喜欢 Angular，但现在我感到不安，我担心 Angular 不是完成这项任务的好选择。

请帮助我找回对 Angular 的希望和真正的热爱。告诉我我做错了什么。

这是我的项目，我真的希望你看看：http: //vokruge.com/signin

登录：anton.v.rodin@gmail.com

通行证：123456

请注意，这都是俄语。您可以访问此页面以查看它现在有多慢：http: //vokruge.com/feed/280。

4

1 回答 1

0

我以一种完全不同的方式来处理这个问题，它速度快而且效果很好。

我根本没有使用指令。我使用递归模板

这是模板的示例。我已将 css 类留在其中以帮助您了解每个部分的作用

<script type="text/ng-template" id="responsetemplate">

<div class="reply">

    <div class="wrapper">
        <div class="questioninner">
            <div class="mainreply">
                <p ng-show="!model.edit" ng-click="edit(model)" ng-bind="model.message"></p>
                <div ng-show="model.edit">
                    <textarea ng-model="model.message"></textarea>
                    <button ng-click="save(model)">save</button>
                    <button ng-click="cancel($parent,model)">cancel</button>
                </div>
            </div>
            <div class="replyfooter">
                <div class="actions">
                    <div ng-show="!model.edit">
                        <a ng-click="edit(model)">edit</a>
                        <a ng-click="delete($parent,model)">retract</a>
                        <a ng-click="reply(model)">reply</a>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <div>
        <div ng-repeat="model in model.responses" ng-include="'responsetemplate'"></div>
    </div>
</div>
</script>

该模板显示一个问题，并使用 ng-repeat 和 ng-include 递归地显示对该问题的所有响应。

模型是我存储我的数据的地方，这些数据基本上是问题和一组响应，其中包含作为孩子的响应数组。

该示例还设置为编辑、删除和回复。

于 2013-10-25T22:10:42.620 回答