Question

我使用的是Grails 2.4.1和Grails Asset Pipeline Plugin版本1.9.7。

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

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

项目结构：

的grails-app
资产
- Javascript角
  - 指令
    - hierarchyviewer.js
    - hierarchyviewer.html

使用Angular Template Asset pipeline grails plugin

时的项目结构

的grails-app
- 资产
  - Javascript角
    - 指令
      - 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'
    }

})

然而;当我尝试加载引用该指令的页面时，我得到指令/ directivea.html引用的404。

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

Answer 1

角度模板资产管道插件作者在这里。几个调整，这应该适合你。

该插件期望模块名称为驼峰式。
该插件还会从文件名中删除.tpl，因此在这种情况下你最终会得到一个名为hierarchyviewertemplate.js的文件
确保文件名（扩展名除外）是唯一的。

在最后一点上，由于资产管道插件将忽略资产目录中的父文件夹，因此以下每个位置中的文件都会导致冲突：

/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 - ＆gt;资产 - ＆gt;模板 - ＆gt; heirarchyViewer - ＆gt; hierarchyviewertemplate.tpl.html

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

希望有所帮助。

Answer 2

有一个名为angular-template-asset-pipeline的插件。它的本质是它将你的.tpl.htm模板放在$templateCache中。然后你就可以像这样使用它（例如来自docs）：

angular.module('myApp.appSection', ['ngRoute'])
.config(function($routeProvider) {
      $routeProvider
          .when('/index', {
              templateUrl: 'index.htm'
          })
          .otherwise({redirectTo: '/index'});
});

如何使用Grails Asset插件引用静态HTML rsource？

2 个答案: