[SOLVED] UI Framework & Angular: What's the proper way to use templateUrl in directive definitions?

Development
1

Hi all,

Before Ref App 2.5, it was ok to do this in the definition of the Angular directive:

templateUrl: '/openmrs/mymodule/templates/mydirective.page',

And we would save the GSP file here: omod/src/main/webapp/pages/templates/mydirective.gsp So that at runtime, after UI Framework has done its processing, the template URL would point to the desired file.

Since Ref App 2.5 (and Angular 1.5.x) something is happening that would process the template’s content in a weird way. We would observe that the whole content is surrounded by quotes and that line breaks would be displayed as their escaped (\n) characters.

This is how an empty template would display:

""

This is how an empty template with one line break would display:

"\n"

This is how this <div>Hello world!</div> template would display:

"
Hello world!
"

(Q.) I’m not sure what the culprit is here (UI Framework, Angular or other), but would anyone have any ideas as to how to keep our template based directives working in the Ref App 2.5?

(ping @darius)

2

@mksd this may be (Not very sure for now) a side effect of the work we did while trying to address XSS attacks. Can you point me at an example on int-refapp.openmrs.org?

3

We have used this mechanism in every of our directives in VDUI, that’s how this popped up while I was making the module Platform 2.0 compatible. Or rather Ref App 2.5 UI-compatible.

But then I was looking for other modules using Angular (such as UI Commons) to see if anything was made differently. But most of the time they don’t use templateUrl but rather simply template. And the issue doesn’t occur with the template attribute.

So the short answer is no :confused: Do you want me to put together a temp branch of VDUI that highlights the issue so that you can have a look?

4

Yes that will do.

5

Ok you can build this branch: https://github.com/mekomsolutions/openmrs-module-visitdocumentsui/tree/tmp

I would suggest to create a patient, then go to the CF dashboard and then click here:

Then you should see the working case of “Hello world!” using template in a directive. To then toggle to using templateUrl and make the issue show up, switch the comments in fileUpload.js:

// templateUrl: '/' + module.getPath(OPENMRS_CONTEXT_PATH) + '/templates/fileUpload.page',
template: '<div>Hello world!</div>',

Thank you for looking into it!

6

@dkayiwa, I realised that it was probably better that the tmp branch shows the problem right away. So I pushed again, same branch as in my previous message.

Let me know if you need anything else from me.

7

@mksd this was caused by the upgrade of angular in the uicommons module https://issues.openmrs.org/browse/UICM-72 Version 1.9 (before the angular upgrade) of the uicommons module will confirm to you that this is the cause.

8

(A.) On the model of what is done in Appointment Scheduling UI, those HTML templates should be put under omod/src/main/webapp/resources/partials/ Then this is how the templateUrl can be set in the directive definition:

templateUrl: '/' + OPENMRS_CONTEXT_PATH + '/ms/uiframework/resource/mymodule/partials/mydirective.html',