How to use Grails Message code tag with Angular JS

Question

I have a custom directive that loads .GSP template ie

In my directive I have

template: '/view/pages/dummy.gsp'

In dummy.gsp,

I have a checkbox like below:

<input type="checkbox" name="orangeFruit"> Orange </input>

Now here instead of using the hardcoded Orange I want to use something like this :

<div ng-repeat="thisfruit in fruits">
<input type="checkbox" name="{{thisfruit}}chkbox">
    ${message(code:'label.{{thisfruit}}')}
</input>
</div>

Above snippet is of my angular template where I am iterating through list of fruits and putting checkboxes for each one of them.

fruits:["orange","apple","banana"] is the angular JSON object.

where {{thisfruit}} is Javascript object and has the value orange.

Below is how my messages.properties file looks like:

label.orange=Orange
label.apple=Apple
label.banana=Banana

When I run the above message code it always gives me "label.orange" instead of "orange". I have this key in my messages.properties file so it should find it. when I replace label.{{thisfruit}} with the label.orange it gives the correct value.

Any help is appreciated!

Answer 1

This is not possible at all and is a most common problem people used to get confused on. You are basically trying to fix a server side GSP or Groovy code with client side javascript or angular code.

GSP file gets compiled at server side not at browsers so it does no about any angular code like {{thisfruit}} which will never be compiled at server side.

Similarly when GSP's are compiled into HTML code it will get converted to HTML code which a browser understands how to render it and there your angular code gets executed.

So when it renders at client side there will be no code available like ${message(code:'label.{{thisfruit}}')} you are trying to execute since it has already got compiled at server side before rendering.

So you can not use server side (Grails) message code at client side (angular) code.

Well for that you can use a pretty awesome client side library for angular. http://angular-translate.github.io/

Check it out.