javascript - 为什么这个 Angular Directive(指令)在加载之前会滞后？

Question

我已将其与 templateUrl 的使用隔离(当我使用带有注入(inject)字符串的模板时，它是即时的)，但是我一生都无法理解为什么 $templateCache 无法正常工作。

AngularJS 1.2.16

该指令，供引用(此有效):

return {
    restrict: 'A',
    template: '<ul class=\"custom-dropdown\">\n <li class=\"row\" ng-repeat=\"item in data\">\n     <div class=\"col-sm-3\">\n          <i class=\"{{ item.icon }}\"></i>\n     </div>\n        <div class=\"col-sm-9\">\n          <h2>{{ item.label }}</h2>\n         <p>{{ item.description }}</p>\n     </div>\n    </li>\n</ul>',
    scope: {
        model: '=ngMenuModel',
        data: '=ngSource',
        select: '&ngSelect'
    },
    compile: function(el, attrs, ctrl) {

        // Build Wrapper
        var container = angular.element('<div class="wrap-dd-menu"></div>'),
            button    = el.clone().empty(),
            template  = el.find('ul.dropdown');

        // Linker
        return function($scope, el, attrs, ctrl) {
            // Compile Template
            var label = $scope.model.label || $scope.data[0].label || attrs.ngMenuDefault + ' <span class="caret"></span>' || '(choose one) <span class="caret"></span>';
            $compile(template)($scope);
            container.append(button.html(label));
            container.append(template);
            el.replaceWith(container);

        }
    }
};

当我使用 templateUrl 而不是 template 时，它无法立即加载

...
templateUrl: 'my-template.ng.html',
...

除了，我在 JS 声明的顶部有这个:

angular.module('Template', []).run(function($templateCache){ 
    ... 
    $templateCache.put('my-template.ng.html', '... template html here... ');
    ...

当然，模块已正确加载到主项目中(甚至作为第一个依赖项)。

angular.module('MyApp', ['Template', ...])...

最后但并非最不重要的一点，有问题的 HTML

<button class="btn btn-default" ng-menu ng-menu-default="(choose one)" ng-menu-model="job.model.lead.type" ng-source="category.services">(choose one) <span class="caret"></span></button>

我什至尝试将默认 HTML 作为占位符放入其中，但是似乎一旦 Angular 初始化，任何使用 templateUrl 的指令都会立即被清除(我无法在编译阶段附加内容来呈现在我看到空按钮闪烁之前的内容)。

有谁知道为什么会发生这种情况，或者我可以采取什么措施来解决它？谢谢!!

[编辑] -- 继续调试 --

我已将问题与在主应用模块中加载 $templateCache 的方式隔离开来。

1. $templateCache.get('my-template.ng.html') === 未定义

2. $templateCache 向/my-template.ng.html 发出 GET 请求

3. GET 请求失败(尽管这是一个自定义 404 页面，因此响应为 200)

4. $templateCache 最终会在 10 秒超时后从由 $templateCache.get('my-template.ng.html') 确认的模块 Templates 加载。

这非常奇怪，因为它是该应用程序/模块中的第一个依赖项，而且我知道同步 HTTP 调用不会中断任何内容(由于使用单个 API 工厂端点)。

回顾一下，模板确实会从模块加载，但只有在 $templateCache 发出返回响应的 HTTP 请求之后，才会正确加载 CACHED 版本

Answer 1

明白了!

事实证明，问题是我这边的，不过值得注意的是，Angular 不抛出任何错误可能会让处于类似情况的其他人感到困惑。

首先，原因确实与 gulp 构建有关，因为 mutator 插件最终在最终编译的输出中复制了模块声明。

---

所以，这不是正确的声明，而是发生了:

angular.module('Template', []).run(function($templateCache){ ... }), angular.module('Template', []).run(function($templateCache) { ... });

由于使用了 mangle，它最初未被检测到，但有趣的是，自 v1.2.16 起，Angular 在运行时没有抛出任何错误

该模块仍然包含在我的主应用程序中，并且可以完全访问，但是 $templateCache 提供程序一定受到了重复的影响，因为只要存在这些重复的声明，它就无法正确解析。

---

[编辑]我想向任何创建使用 $compile 而不是嵌入/替换来修改父元素和子元素的指令的人提供另一条建议:

templateUrl 将无法正常工作

尽管在我的链接器中调用了 template = $compile(template)($scope) ，但作用域实际上并没有被绑定(bind)(正如 ng-repeat 加载本地范围为空，而模型返回正确的值)。

我最终通过完全删除 templateUrl 并将我的指令结构更改为以下方式解决了这个问题:

SR.directive('ngMenu', ['$templateCache', function($templateCache) {

    var template = $templateCache.get('/job-type.ng.html');

    // Runs during compile
    return {
    restrict: 'A',
    //template: '<ul class=\"dropdown\">\n  <li class=\"row\" ng-repeat=\"item in data\">\n     <div class=\"col-sm-3\">\n          <i class=\"{{ item.icon }}\"></i>\n     </div>\n        <div class=\"col-sm-9\">\n          <h2>{{ item.label }}</h2>\n         <p>{{ item.description }}</p>\n     </div>\n    </li>\n</ul>',
    //templateUrl: '/job-type.ng.html',
    scope: {
        model: '=ngMenuModel',
        data: '=ngSource',
        select: '&ngSelect'
    },
   ...