在 AngularJS 页面上预编译指令答案

【问题标题】：Precompiling Directives on a page AngularJS在 AngularJS 页面上预编译指令
【发布时间】：2015-11-23 09:43:18
【问题描述】：

我的 Angular 应用程序面临性能问题。这背后的原因是在页面中过度使用指令。因为我没有足够的时间将该页面分解为多个页面。

我需要一个解决方案（服务器端 .NET），我们可以在其中预编译和预链接指令到模板内的 DOM 元素，然后将该页面提供给客户端。

或者在做其他事情的同时在客户端异步预编译和预链接指令。

<my-directive></my-directive> <!-- 1000 times within the single page -->

谢谢。

<label class="checkbox" ng-hide="ctrl.shouldHide()">
    <input type="checkbox" id="{{fieldId}}" ng-true-value="{{ctrl.valueId}}" ng-model="collection[vhFieldId]" />{{ ctrl.questionText }}
</label>

【问题讨论】：

“或者在客户端异步预编译和预链接指令”——这个比较现实。一般来说，我怀疑您是否需要同时提供所有 1000 个指令（您的用户是否有 1000 只手和 2000 只眼睛？）。很可能你甚至可以对它们进行惰性编译。
是的，你是对的，我们尝试通过以块的形式添加控件来异步加载部分控件，但这种方法会导致 UI 缓慢，这对用户来说很烦人。所以我们决定一次性加载所有内容，然后允许用户与 UI 交互。
我明白了。然后，您确实可以一次加载 al 但按需编译。
你也可以改进指令，如果它是 1000 个元素，我猜你使用 ngRepeat 你会使用 track by 吗？
发布指令代码，应该可以改进一下。

标签： javascript angularjs angularjs-directive

【解决方案1】：

您不能在服务器端“预编译和预链接指令到 DOM 元素”，因为服务器端没有 DOM，而 Angular 无论如何都是客户端技术。

可以做的是更好地编写指令，例如，它只需要编译（解析）一次模板，并且只链接每个实例。这是假设您遇到的性能问题确实与上述指令有关。

性能问题也可能是由许多事情引起的，有时一些琐碎的事情（例如为指令设置最小高度）可能非常有用（因为如果会阻止页面重排）。

要在此处获得任何实际帮助，您确实需要共享一些代码。

【讨论】：