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

我最近发现自己被一个问题困扰着，看，我现在非常需要你告诉我解决这个问题的方法

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

我已经创建了指令Post和Comment。我还创建了PostList和CommentList指令来管理帖子和评论。 Post和Comment是类似的代码：

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

以下是指令树：

当我想呈现一个包含20篇帖子的列表，每个帖子都有几条评论时，我需要等待一秒钟以上才能完成工作。网页在此期间没有响应

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

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

请帮我把我的希望和真爱带回我的身边。告诉我我做错了什么

这是我的项目，我真的想让你看看：

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

通行证号码：123456

---

请注意，这些都是俄语。你可以访问这个页面，看看它现在有多慢：。

我用了一种完全不同的方法来处理这个问题，它很快而且运行良好

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

下面是一个模板示例。我留下了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递归显示对该问题的所有响应

模型是我存储数据的地方，基本上就是问题和一系列的回答，这些回答都是孩子们的回答

---

该示例还设置了编辑、删除和回复功能。

您在哪里存储编辑、删除和回复功能？据我所知，ng包括创建新范围。以前从未听说过。不是我见过的。检查那里：指令信息这个指令创建了一个新的作用域。我看了一下，是的，在那个例子中它创建了一个新的作用域，但那不是ng include，那是因为他这样做，创建了一个新的子控制器。如果不递归设置新的子控制器，它将继续使用相同的作用域

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