# How to use an AngularJS custom directive with templateUrl parameter ?

**URL:** <https://talk.openmrs.org/t/how-to-use-an-angularjs-custom-directive-with-templateurl-parameter/5855>\
**Category:** Development\
**Tags:** angular\
**Created:** [April 20, 2016, 12:52pm UTC](https://talk.openmrs.org/t/how-to-use-an-angularjs-custom-directive-with-templateurl-parameter/5855 "2016-04-20T12:52:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mksrom](https://talk.openmrs.org/user_avatar/talk.openmrs.org/mksrom/32/20221_2.png) [@mksrom](https://talk.openmrs.org/u/mksrom)\
**Post date:** [April 20, 2016, 12:52pm UTC](https://talk.openmrs.org/t/how-to-use-an-angularjs-custom-directive-with-templateurl-parameter/5855/1 "2016-04-20T12:52:23Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![raff](https://talk.openmrs.org/user_avatar/talk.openmrs.org/raff/32/11894_2.png) [@raff](https://talk.openmrs.org/u/raff)\
**Post date:** [April 21, 2016, 6:55pm UTC](https://talk.openmrs.org/t/how-to-use-an-angularjs-custom-directive-with-templateurl-parameter/5855/2 "2016-04-21T18:55:06Z")

</div>

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](https://github.com/PawelGutkowski/openmrs-contrib-uicommons/blob/master/angular/openmrs-breadcrumbs/openmrs-breadcrumbs.component.js)

---

<div class="post-metadata">

**Author:** ![mksrom](https://talk.openmrs.org/user_avatar/talk.openmrs.org/mksrom/32/20221_2.png) [@mksrom](https://talk.openmrs.org/u/mksrom)\
**Post date:** [April 25, 2016, 4:06am UTC](https://talk.openmrs.org/t/how-to-use-an-angularjs-custom-directive-with-templateurl-parameter/5855/3 "2016-04-25T04:06:32Z")

</div>

OK. Thanks @raff