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

我已经四处游荡了。这个问题通过添加＆＃39; AssetService＆＃39;到我的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 在控制器中为您的网址添加前缀...

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资产图像

2 个答案: