javascript - 如何使用 Grails Asset 插件引用静态 HTML rsource?

原文 标签 javascript angularjs grails asset-pipeline

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

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

我如何引用 Assets 目录中的 HTML 文件?

项目结构:

  • grails 应用程序
  • 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 插件时如何正确引用模板?

    最佳答案

    Angular 模板 Assets 管道插件作者在这里。一些调整,这应该适合你。

  • 该插件希望模块名称为驼峰式。
  • 该插件还会从文件名中删除 .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 -> 模板 -> heirarchyViewer -> hierarchyviewertemplate.tpl.html

    如果您的模板包含在插件中,请替换 require_treerequire_full_tree
    希望有帮助。

    关于javascript - 如何使用 Grails Asset 插件引用静态 HTML rsource?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25390307/

    相关文章:

    javascript - Jquery 日期选择器按钮 tabindex

    javascript - 将数组作为输入的javascript函数,将每个数组元素加1,然后返回值增加的新数组不起作用

    javascript - JavaScript哈希值的总和

    javascript - 想对我的RegEx(正则表达式)进行更多分类

    grails - Grails 3 Spring Security UI忘记密码空白URL和用户

    java - AngularJS header 中的 "Content-Disposition"和文件名

    javascript - 404 在 ionic /Angular ng-repeat 上找不到图像,仅用于第一张图像

    javascript - Facebook cdn 个人资料图片 Url Forbidden 403

    尽管 chmod 777,java.io.FileNotFoundException(权限被拒绝)

    grails - 在域类之前grails @Resource Annotation