Question

我有一个使用gulp和angular的项目。我想点击一个按钮，弹出一个包含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)

我的templates.js文件包含：

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

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

只是说我尝试了什么，我手动将模板文件复制到它正在查找的目录中并找到它。这不是解决方案，因为我希望它来自缓存。

由于

Answer 1

您还必须将templates模块指定为模块的依赖项。例如：

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

希望这有帮助。

Answer 2

这个答案适用于可能遇到此问题的其他任何人，但他们确信他们确实包含了依赖关系作为接受的答案：

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

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

但它正在寻找'someurl.html'。我将代码更新为：

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

一切都开始了。

Answer 3

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

您可以使用这个gulp插件[https://github.com/laxa1986/gulp-angular-embed-templates]，它可以读取您的路线，指令，并将templateUrl替换为templateUrl中引用的模板。

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

您好-世界directive.js：

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

您好-世界template.html：

<strong>
    Hello world!
</strong>

gulpfile.js：

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.js')
        .pipe(embedTemplates())
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templates将生成以下文件：

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

Answer 4

我的2美分（因为我也对此感到震惊。）

1）确保您在主模块中具有依赖关系。（如果要为模板创建单独的模块）。

2）确保在模板网址中处理前导\。

3）确保文件名中使用的文本框与模板URL中使用的文本框匹配。（是这个）。

角度模板缓存无法正常工作

4 个答案: