relative templateUrl in directive in AngularJS

Question

I have a directive that looks like this:

angular.module('customDirectives', [])
.directive('searchResult', function() {
    return {
        templateUrl: 'app/directives/templates/searchResult.html',
        replace: true,
        scope: {
            itemObject: "=",
            itemById: "&"
        }
    }
});

It works, but I would like to have a templateUrl like "templates/searchResult.html" since the template folder is right next to my directive file. But it seems like I need to give the location of my template depending on where is my index.html file... Is there anyway to change the templateUrl to "templates/searchResult.html"?

'app/directives/templates/searchResult.html' is a relative path. If that is actually how you have the site structured you might just move the templates folder up two nodes. — errata
– errata, Commented Jan 18, 2016 at 23:47
My goald would be that the path be just 'templates/searchResult.html' so that if I would need my directives in an other project, I could just copy/paste the directive folder whitout having to change ALL my directives templateUrl. — Kévin Duguay
– Kévin Duguay, Commented Jan 19, 2016 at 0:10
Refer to the answer suggested in stackoverflow.com/questions/21103724/… — it does seem a little hacky, but it's a good workaround. — miqh
– miqh, Commented Jan 19, 2016 at 0:47

PJDev · Accepted Answer · 2016-01-19 00:39:42Z

I think I have a workaround for it. If you are sure, that you will have all your directives in one place, just use an angular constant to store your root folder url. In order to do this, firstly add a constant to your app module, for example:

angular.module('app', ['customDirectives'])
    .constant('appConfig', {
         directivesRoot: 'app/directives/'
     });

Then, in your directive, inject the appConfig and use it like this:

angular.module('customDirectives', [])
.directive('searchResult', ['appConfig', function(appConfig) {
    return {
        templateUrl: appConfig.directivesRoot + 'templates/searchResult.html',
        replace: true,
        scope: {
            itemObject: "=",
            itemById: "&"
        }
    }
}]);

If you want to use directives in another project, you will need to change only the directivesRoot url.

Collectives™ on Stack Overflow

relative templateUrl in directive in AngularJS

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related