javascript - AngularJS 指令模板 URL 需要前导斜杠，中断测试

Question

'use strict';

directives.directive('primaryClient', function() {
  return {
    restrict: 'A',
    templateUrl: 'views/directives/primary-client.html',
    scope: {
      'client': '='
    }
  };
});

我有一个简单的指令，它只用模板文件的内容替换一个元素。如上图，坏了。 Chrome 中的错误是 Error: Unexpected request: GET views/directives/primary-client.html .添加前导斜杠(即 /views/directives/primary-client.html)可解决问题。

然而

在我的测试中，我绝对无法让它与前导斜线一起工作。当我省略前导斜杠时，我加载了文件并通过了测试，但这当然会破坏实际功能。

如果需要，我可以分享更多测试代码，但加载模板的测试示例似乎都显示了省略前导斜线的指令。我有 <base href="/">在 index.html 中设置。是不是我做错了什么强制使用前导斜线？

Answer 1

我最近遇到了这个关于相对路径和测试的问题。在我的指令中，我总是有前导斜杠:

templateUrl: '/dist/js/templates/my-template.html'

这在我的应用程序中运行良好，但是当我运行测试时，我收到了Unexpected request: GET 错误。

我能够使用 karma-ng-html2js-preprocessor 解决这个问题并尝试使用相对文件路径和非相对文件路径，直到它工作为止。

基本上，在我的 karma 配置中，对于我拥有的预处理器(注意 public 前没有斜线):

preprocessors: {
        'public/js/templates/**/*.html': ['ng-html2js']
    },

在我的 karma 配置文件列表中我有(同样，公开前没有斜线):

files: [
        'public/js/templates/**/*.html'
    ],

然后我在我的 karma 配置中设置预处理器如下(注意 dist 之前的斜杠，这是重要的部分)

ngHtml2JsPreprocessor: {
        stripPrefix: 'public',
        prependPrefix: '/dist',
        moduleName: 'dir-templates'
    }

这意味着预处理器将在 public/js/templates/my-template.html 中获取我的模板文件并将其放入 /dist/js/templates/my 下的缓存中-template.html

然后在我的实际测试中，我导入了特殊模块 dir-templates，它在上面预处理器的 moduleName 下定义，如下所示:

beforeEach(
    module('app')
);

beforeEach(
    module('dir-templates')
);

一切正常!