AngularJS 模板中的 Grails 资产图像

Question

我正在使用 Grails 2.4.4 和 AngularJS 1.3.15 创建一个简单的应用程序。为了使模板与 Grails 一起工作，我使用了 AngularJS Template Asset-Pipeline Plugin 2.0.7。

我的第一个原型没有使用 ngRoute 的任何路由逻辑。现在我想提取部分不断增长的应用程序并将它们放在单独的模板中。这几乎奏效了，但我对图像有疑问。以前我使用这样的构造将图像加载为资产：

<img src="${assetPath(src: 'image.png')}">

这确实有效，因为整个应用程序是一个 .gsp 页面。将代码提取到模板中，此处理不再发生并且图像无法再加载。

我目前的解决方法是：

<img src="../assets/image.png">

显然这种技术有一些缺点。使用相对路径对资产位置进行硬编码可能非常脆弱。我是否错过了一些可以帮助我在这里将 AngularJS 与 Asset Pipeline 合并的不错的功能或命令？

Answer 1

看起来标签和相应的 assetPath() 在这方面有问题。它们似乎不遵守 config.groovy 中的 serverURL 设置或在模板中呈现时正确计算基本路径。

我能够使用 createLink() 标记生成我的路径，以一种不太脆弱的方式解决这个问题。它修复了资产控制器的名称，但我认为他们不太可能更改它。

在我的例子中，我在 AJAX 回调中解析了一些标志图像。

<img src='${createLink(controller: "assets", action: "flags/16/US.png")}' />

希望这对你也有用。

Answer 2

我 'got around' 通过将 'AssetService' 添加到我的 Angularjs 项目来解决这个问题。

angular.module('myApp.assets')
.service('AssetService', [ function () {

    this.getAssetDir = function() {
        return window.grailsSupport.assetsRoot;
    };

    this.getRootDir = function() {
        return window.grailsSupport.root;
    };
}]);

这需要您的 Grails 布局文件中的一些代码....

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><g:layoutTitle default="MyApp"/></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon">
    <link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}">
    <link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}">

    <!-- add this to your layout -->
    <g:javascript>
        window.grailsSupport = { 
            assetsRoot : '${ raw(asset.assetPath(src: '')) }',
            root : '${createLink(uri: '/')}' 
        };
    </g:javascript>

    <asset:stylesheet src="application.css"/>
    <asset:javascript src="application.js"/>
    <g:layoutHead/>
</head>

我在另一个堆栈溢出 question 的答案中得到了 window.grailsSupport 代码。

您现在可以使用 AssetService 为控制器中的 URL 添加前缀...

angular.module('MyApp.profile')
.controller('MyCtrl', [ 'AssetService', '$http', function(AssetService, $http) {

    var self = this;
    self.pathToAnonProfile = AssetService.getAssetDir() + "ppt_Anonymous.jpg";

    $http.get(AssetService.getRootDir() + 'api/v1/users').then(function(response)    {
    ....
    }, function(errResponse) {
    ....
    }); 
}]);

它很可能会得到改进，您仍然需要混合使用 gsp 和纯 Angular 模板，但它保留了单个服务中的资产路径，可以轻松修改。

AngularJS 模板中的 Grails 资产图像

Grails asset images in AngularJS templates

grails

asset-pipeline

angularjs