Question

正在阅读关于Angular中延迟加载的几篇博文：

我能够成功实现其中一些技术以满足我的需求（AngularJS + RequireJS）来延迟加载控制器。但是，我找不到能够按需真正加载指令的方法。指令在视图中使用的次数是99.99％，因此必须在视图中的某处声明需求。我觉得手动指定每个状态/路由在路由器级别所依赖的各种依赖关系的完整列表是相当大的。我可能错了。在这里期待一些争论。

现在，尽管存在不确定性，我还是想要一个评论指令，如：

<!-- directive: require-directive 'translate' -->

或者可能：

<!-- directive: require ['directive/translate', 'filter/human-readable'] ->

然后在视图中使用它：

<div translate>message.welcome<div>

然而，这带来了几个问题：

指令的加载是异步和非阻塞的，这意味着我们将在视图中看到aka-FOUT效果。
在解决了指令依赖关系之后，必须重新编译整个视图。

到目前为止，我还没有使用评论指令，而是我有这个：

<title require="directives/translate" translate>message.welcome</title>

但是通过这种方法，你可以从$scope.$apply()中获益，我不知道为什么。所以相反，我被迫用优先级手动重新编译实例元素（以避免无限循环，因为否则require指令将重新编译自己）：

// note last argument 10000 — this is the priority
// @see https://code.angularjs.org/1.2.20/docs/api/ng/service/$compile#usage
$compile($element, angular.noop, 10000)($scope);priority

然后它有效。并且不会重新编译整个视图，只是require指令所在的元素。也许我可以在重新编译之前删除require指令。在键入SO问题时，我对这个想法感到震惊。不得不试一试。

但无论如何，由于我们已经非常深入角色，我有点害怕将这段代码用于制作，因为我没有真正的优先经验。

所以我的问题：

我做错了什么吗？（为什么？）
您是否同意为每个州/路由手动编写完整的依赖关系列表是不直观和/或冗余的？（如果不是，为什么？）
有更好的方法吗？

感谢。

编辑＃1

这是基于评论的require指令的 working prototype ：

<!-- directive: require ['directive/translate', 'filter/human-readable'] ->

但是我觉得这个方法有一个很大的缺陷：我们必须在依赖解析之后编译（渲染）整个视图。另一方面，如果我们牺牲自然指令注册：

define(['app'], function() {
    app.directive('title', ['$rootScope', function ($rootScope) {
        ....
    }]);
})

类似于：

define([], function() {
    return {
        'directive': ['title', ['$rootScope', function ($rootScope) { ... }]]
    }
});

这不是＆＃34; native＆＃34;，但通过查询和编译特定的DOM节点而不是整个视图，为我们提供了性能提升的可能性。要试一试。

编辑＃2

因此，受到查询元素渲染的想法的启发 - 我试了一下。它运作良好：http://plnkr.co/edit/cClpSd?p=preview

这仍然是alpha并且不会处理过滤器，但它已经接近可用的外观。

Angular：将延迟加载的指令与DOM元素相关联

编辑＃1

编辑＃2

0 个答案: