我正在使用 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
- 指令
- javascripts
使用 Angular Template Asset pipeline grails plugin 时的项目结构
- grails 应用程序
- Assets
- javascripts
- 指令
- hierarchyviewer.js
- 指令
- 模板
- hierarchyviewer.tpl.html
- javascripts
- Assets
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 插件时正确引用模板?
最佳答案
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
希望对您有所帮助。
关于javascript - 如何使用 Grails Asset 插件引用静态 HTML 资源?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25390307/