Javascript 角度模板缓存不工作

我有一个项目，使用吞咽和角度。我想单击一个按钮和一个包含要显示的html的弹出窗口

在build.js文件中，我有以下代码：

gulp.task('templates', function() {
  gulp.src(['!./apps/' + app + '/index.html', './apps/' + app + '/**/*.html'])
    .pipe(plugins.angularTemplatecache('templates.js', {
      standalone: true,
      module: 'templates'
    }))
    .pipe(gulp.dest(buildDir + '/js'));
});

在我的app.js文件中，我有：

.controller('PopupCtrl', function($scope, ngDialog) {
  $scope.clickToOpen = function () {
      ngDialog.open({ 
        template: 'templates/popup.html'
      });
  };
})

单击按钮时出现错误：

GET http://mylocalhost:3000/templates/popup.html 404 (Not Found) 

My templates.js文件包含：

angular.module("templates", []).run(["$templateCache", function($templateCache) {
$templateCache.put("templates/popup.html", "my html") ...etc

为什么模板缓存不能识别对templates/popup.html的调用并显示缓存中的内容，而不是查看404的URL

只是说我已经尝试过了，我手动将模板文件复制到它正在查找的目录中，它找到了它。但这不是解决方案，因为我希望从缓存中获取它

---

谢谢

您还必须指定

模板

模块作为模块的依赖项。例如：

angular.module('myApp', ['templates', 'ngDialog'])

---

希望这能有所帮助。

此答案适用于可能遇到此问题的任何其他人，但他们确信他们确实包含了依赖项，因为已接受的答案指出：

确保验证您使用的“密钥”是否匹配。在我的场景中，发生了以下情况：

$templateCache.put('/someurl.html', 'some value');

但它正在寻找

'someurl.html'

。一旦我将代码更新为：

$templateCache.put('someurl.html', 'some value');

---

一切都开始工作。

您还可以使用另一种方法来删除对$templatecache的依赖关系

您可以使用这个gulp插件[它可以读取您的路由、指令，并用templateUrl中引用的模板替换templateUrl

src
+-hello-world
  |-hello-world-directive.js
  +-hello-world-template.html

hello-world-directive.js：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        // relative path to template
        templateUrl: 'hello-world-template.html'
    };
});

hello-world-template.html：

<strong>
    Hello world!
</strong>

gulp angular嵌入模板将生成以下文件：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});

angular.module（'test'）。指令（'helloWorld'，函数（）{
返回{
限制：'E'，
模板：“你好，世界！”
};
});

我的2美分（因为我的头也撞到了这个。）

1） 确保主模块中有依赖项。（如果要为模板创建单独的模块）

2） 确保在模板URL中处理前导的

\

---

3） 确保文件名中使用的文本大小写与模板URL中使用的文本大小写匹配。（是，这一个）.

我也遇到过。该死的Tootin！大小写也很重要！我正在使用gulp生成“$templateCache”，路径是从“templatesUrl”中引用的实际文件夹的子文件夹开始的。这帮助我解决了这个问题。我刚刚遇到这个问题，结果发现URL前面有一个空格。在我的情况下，我有一个拦截器将应用程序版本附加到url以进行缓存破坏。因此，如果url已加载到

$templateCache

，我必须更改拦截器，使其不执行此操作。谢谢！你救了我一天！（即使是4年后的2018年：）

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});