javascript - 如何使用 Grails Asset 插件引用静态 HTML 资源？

Question

我正在使用 Grails 2.4.1 和 Grails Asset Pipeline Plugin版本 1.9.7。

我有一个 javascript 文件(它定义了一个 AngularJS 指令)需要引用一个静态 HTML 文件(它将用作 AngularJS 指令的模板)。

如何在 Assets 目录中引用 HTML 文件？

项目结构:

• grails-app
• Assets
  • javascripts
    • 指令
      • hierarchyviewer.js
      • hierarchyviewer.html

使用 Angular Template Asset pipeline grails plugin 时的项目结构

• grails 应用程序
  • Assets
    • javascripts
      • 指令
        • hierarchyviewer.js
    • 模板
      • hierarchyviewer.tpl.html

directivea.js 包含:

angular.module('HierarchyViewer', []).directive('hierarchyviewer',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        controller: function ($scope, $http) {
        },
        templateUrl: 'hierarchyviewer.tpl.html'
    }

})

但是；当我尝试加载引用该指令的页面时，我收到 404 指令/directivea.html 引用。

如何在使用 Asset Pipeline 插件时正确引用模板？

Answer 1

Angular Template Asset Pipeline Plugin 作者在这里。一些调整，这应该适合你。

• 插件要求模块名称采用驼峰式。
• 该插件还会从文件名中删除 .tpl，因此在本例中您将得到一个名为 hierarchyviewertemplate.js 的文件
• 确保文件名(不包括扩展名)是唯一的。

关于最后一点，由于 Asset Pipeline 插件将忽略 assets 目录中的父文件夹，因此以下每个位置中的文件都会导致冲突:

• /assets/javascripts/hierarchyviewertemplate.js
• /assets/templates/hierarchyviewertemplate.tpl.html

就实际代码而言，像这样的东西应该更适合你:

//= require_self
//= require_tree /hierarchyViewer

angular.module('hierarchyViewer', []).directive('hierarchyviewer',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        controller: function ($scope, $http) {
        },
        templateUrl: 'hierarchyviewertemplate.html'
    }
});

这假设您的 hierarchyviewertemplate.tpl.html 文件位于

grails-app -> assets -> templates -> heirarchyViewer -> hierarchyviewertemplate.tpl.html

如果您的模板包含在插件中，请将 require_tree 替换为 require_full_tree

希望对您有所帮助。