How to use an AngularJS custom directive with templateUrl parameter ?

Development
1

Hi everyone !

Let’s consider 2 Angular modules, from 2 different OpenMRS modules:

openmrs-module-medicationmanagement

medication.js: var medicationApp = angular.module('medication', [... ]);

openmrs-module-dispense

dispense.js: var dispenseApp = angular.module('dispense', [... ]);

Let’s say the Medication angular module defines a custom directive named ‘order-summary’ to display any given order’s summary.

medication.js:

   medicationApp.directive('orderSummary', function () {
        return  {
          templateUrl: 'templates/order-summary-template.page'
           };
       })

templates/order-summary-template.gsp:

<div>
  <span>Order Summary</span>
  ...
</div>

Now, I’d love to be able to use this directive in my Dispense page. dispense.gsp:

<div>
  <span>Dipense</span>
  <order-summary></order-summary>
  ...
</div>

Problem is:

The directive in my page won’t work. It returns an empty directive. No error message anywhere.

But I’ve found that the problem is because the templateUrl page (templates/order-summary-template.page) from Medication module is not available when my Dispense page is loaded. Therefore the directive can’t be displayed.

Q: How to use an AngularJS custom directive with templateUrl from another module ?

2

The way we managed to make it work is to use template instead of templateUrl and embed the partial in the js file. The easiest way to do it is to use a tool like webpack, which embeds html partial automatically while building a bundle, see for example https://github.com/PawelGutkowski/openmrs-contrib-uicommons/blob/master/angular/openmrs-breadcrumbs/openmrs-breadcrumbs.component.js

3

OK. Thanks @raff