为什么这个角度指令在加载之前会滞后？

Question

我已将它隔离到templateUrl的使用（当我使用带有注入字符串的模板时，它是即时的）然而我无法理解为什么$templateCache不是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); } } }; 工作正常。

AngularJS 1.2.16

该指令仅供参考（本作品）：

templateUrl

当我使用template代替... templateUrl: 'my-template.ng.html', ... 时，无法立即加载

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

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

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

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

<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

$templateCache

我甚至尝试将默认HTML放在那里作为占位符，但似乎只要Angular初始化，任何使用templateUrl的指令都会立即被清除（我无法在编译阶段附加内容，或者呈现在我看到空按钮的闪光之前的内容。）

有谁知道为什么会发生这种情况，或者我能做些什么来解决它？谢谢!!

[编辑] - 继续调试 -

我已将问题与MAIN应用模块中加载Templates的方式隔离开来。

1. $ templateCache.get（'my-template.ng.html'）=== undefined

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

3. GET请求失败（虽然这是一个自定义的404页面，所以200响应）

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

这非常奇怪，因为它是该app /模块中的第一个依赖项，我知道没有同步HTTP调用正在中断任何事情（由于使用单个API工厂端点）。

总结一下，模板是从模块加载的，但只有在{{1}}发出返回响应的HTTP请求之后才会加载

Answer 1

知道了！

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

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

---

所以，这不是正确的声明，而是发生了这种情况：

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

由于使用mangle，它最初未被检测到，但有趣的是角度在v1.2.16时没有在运行时丢失

该模块仍然包含在我的主应用程序中，并且完全可以访问，但$ templateCache提供程序必须受到重复的影响，因为无论何时出现这些重复的声明都无法正确解析。

---

[编辑] 我想向任何创建指令的人提供一条建议，使用$ compile而不是transclude / replace修改父元素和子元素：

templateUrl无法正常工作

尽管在我的链接器中调用了template = $compile(template)($scope)，但是范围实际上没有被绑定（事实证明，当模型返回正确的值时，本地范围的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'
    },
   ...