codingdir logo sitemap sitemap |

Stating directive templateUrl relative to root

By : , Category : javascript

Looks like you're trying to do ASP.NET style app-relative paths but client-side. The fix is actually in HTML: add a base tag in the head, like this:

<base href="<%= Request.ApplicationPath %>" />

Then keep your template paths relative to this, as in

templateUrl: 'Scripts/app/templates/personalDetails.html'
ReLated :

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.

The currently executing script file will always be the last one in the scripts array, so you can easily find its path:

// directive.js

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;

angular.module('app', [])
    .directive('test', function () {
        return {
            templateUrl: currentScriptPath.replace('directive.js', 'directive.html')

If you're not sure what is the script name (for example if you're packing multiple scripts into one), use this:

return {
    templateUrl: currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1) 
        + 'directive.html'

Note: In cases where a closure is used, your code should be outside to ensure that the currentScript is evaluated at the correct time, such as:

// directive.js

    angular.module('app', [])
        .directive('test', function () {
            return {
                templateUrl: currentScriptPath.replace('directive.js', 'directive.html')
    (function () {
        var scripts = document.getElementsByTagName("script");
        var currentScriptPath = scripts[scripts.length - 1].src;
        return currentScriptPath;

Apparently this is functioning as intended (you can start from this comment and read down):

You can't use the template or templateUrl properties of directive definition object since it overwrite whatever content the element has.

You'll need to add the template on your own.

.directive("grid", function(){
   return {
      link: function(scope, element){
         // this assumes that your child directives have registered themselves and 
         // are no longer needed
         var templateUrl = "grid.html";
         element.append("<div ng-include='"" + templateUrl + ""'></div>");

Message :
Login to Add Your Comments .
How to disable registered OpenCL platforms on Windows?
Is Observable broken in Angular 2 Beta 3?
Cross-thread operation not valid when using Invoke
How to pass an IEnumerable or queryable list of properties from Controller to View
Finding numbers after a certain keyword using Python
Pocketsphinx recognizes random phrases in a silence
Passing non-thread-safe objects through thread-safe containers
React scroll nav
BizTalk WCF-BasicHttp Adapter does not allow Empty string for Service Certificate Props
Why property ''cause" of Exception is repeating forever?
Privacy Policy 2017 © All Rights Reserved .