AngularJS Variable inside scope or custom directive : related to ng-messages-include

Question

I am learning AngularJS, came across one scenario and not sure what is the best approach.

Below is the scenario.

The html pages are running on a server https://example.com/com/server/ and can have appended url like /forms/resource/error.html or forms/src/main/abc.js

When I try to include like the below it gives me 404 error because it does not go to the exact path

<div ng-messages-include="error.html"></div>

It tries to find the html in below location obviously and gives error, can I give this path relative? tried few options did not work like giving in single quote https://example.com/com/server/error.html

The actual path should be https://example.com/com/server/form/resources/error.html

I know that I can give the path like

<div ng-messages-include="form/resources/error.html"> </div>

but assume the path is relatively long and would make the html look ugly if I need to add it at around 50 places.

Suggestions on below approach

• Create a custom directive errorMessage and then add as <error-message><error-message> and return the error-message html template, in the directive I can give the long path to the actual html template

• Or create a variable in the $scope object,say location and then set the complete string there, use that like the below <div ng-messages-include='{{location}}/error.html'></div> //not sure of the syntax

Answer 1

If the path "should be https://example.com/com/server/form/resources/error.html" then write it as cuch inyour source code. The absolute path will always be correct, why not use it?

Now if you are worried about repetition, you could indeed write a custom directive.

One other option would be to have a "local" variable, a scope property like errorTemplateURL:

$scope.errorTemplateURL= 'https://example.com/com/server/form/resources/error.html';

Which you would then use as:

<div ng-messages-include="{{errorTemplateURL}}"></div>

But if you need to share that variable across controllers, you should create a service and inject it in any controller that needs it.

NOTE: it is ng-messages-include not ng-message-include.