Question

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

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

我已创建指令发布和发表评论。我还创建了 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 ，的纳克绑定-HTML不安全即可。 viewPost.html 包含commentList指令，该指令负责显示注释列表。当我编译帖子时，这篇文章的每个评论的编辑都会自动启动。

这是指令树： Tree of directives

当我想要为每个帖子呈现包含多个评论的20个帖子的列表时，我等待工作完成之前的一秒钟。在此期间，网页不会响应。

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

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

请帮助我带回希望并真正爱上Angular。告诉我我做错了什么。

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

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

传球：123456

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

Answer 1

我以完全不同的方式接近这一点，而且速度快，效果很好。

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

以下是模板的示例。我已经离开了css课程，以帮助您了解每个部分的作用</ p>

<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以递归方式显示对问题的所有回复。

模型是我存储数据的地方，这基本上是一个问题和一组响应数组作为子项的响应。

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

长$ compile编译持续时间，了解AngularJs中延迟的性质

1 个答案: