Long $compile duration, understanding the nature of the delay in AngularJs

问题

I have a problem which I have recently found myself obsessed with, see, I extreamly Now need you to show me the way of working the problem out.

My business task was to create a list of posts with comments to each of them. Each post have 3 state: view, edit and deleted.

I've created directives Post and Comment. I've also created PostList and CommentList directives to manage Posts and Comments. Post and Comment are similar code: 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);
            }
        }
    }
})

Each of templates (e.g. viewPost.html) have a lot of bindings and directives such as ng-show, ng-src, ng-bind-html-unsafe. The viewPost.html contains commentList directive which responsible for displaying list of comments. When I compile a Post the compilation of each comment for this post are launching automatically.

Here is the tree of directives:

When I want to render a list of 20 posts with several comments to each of them, I'm waiting for more than a second before the work is done. Web page don't response while this period.

Is my way correct to organize such structure? Is Angular suitable for this business task?

I do love Angular, but now I feel upset and I'm afraid that Angular isn't a good choice for this task.

Please, help me to bring back my hope and truly love to Angular. Tell me what I made wrong.

Here is my project which I really want you to look at: http://vokruge.com/signin

login: anton.v.rodin@gmail.com

pass: 123456

Be aware that's all in Russian. You can visit this page to see how slow it is right now: http://vokruge.com/feed/280 .

回答1:

I approached this a totally different way and it is fast and works well.

I didn't use directives at all. I used recursive templates

Here is an example of the template. I have left the css classes in to help you see what each section does

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

The template shows a question and it recursively shows all the responses to the question using the ng-repeat and ng-include.

model is where i store my data which is basically the question and an array of responses that have arrays of responses as children.

the example is also setup for editing, deleting and replying.

来源：https://stackoverflow.com/questions/19599896/long-compile-duration-understanding-the-nature-of-the-delay-in-angularjs