Grails and Angular: GSP plugin tag inside ng-repeat loop

Question

I'm working in a Grails project that uses Angular.

I use a plugin called PrettyPrint in order to have "twitter like" time (i.e. formatting dates like 'moments ago').

I want to use the plugin inside a ng-repeat loop.

<tr ng-repeat="notification in notifications">
...
    <td><prettytime:display date="${notification.date}" /></td>
...
</tr>

In the above code, the error thrown is Cannot get property 'date' on null object. (it doesn't recognize notification item from angular loop).

If I use {{notification.date}} it shows the date.

How can I deal with both, the plugin and Angular?

score 2 · Answer 1 · answered Oct 07 '15 at 21:47

Put simply, you can't.

One is browser based and the other is server based. You can't use the plugin, which is server based, and call it from JavaScript in the browser.

Think it through. The ng-repeat loop is being done by the browser. When this happens the server has already finished processing the GSP and sent it to the browser. There is no opportunity for the plugin to be called then.

You will have better luck taking the date from the server and parsing it in the browser and using a browser based plugin which offers the same functionality as the Grails plugin for date formatting.

score 1 · Accepted Answer · answered Oct 11 '15 at 11:10

Try this code in your gsp (assume you have passed notifications list to the view via the model):

<%
  def notifications = notificationsFromModel.collect {
    [date: prettyTime.display(it.date), message: it.message]
  }
%>

<span ng-init="notifications = <%= notifications as JSON %>"></span>

<tr ng-repeat="notification in notifications">
  <td>{{ notification.date }}</td>
  <td>{{ notification.message }}</td>
</tr>

Grails and Angular: GSP plugin tag inside ng-repeat loop

2 Answers2