AngularJS V1.4.7 directive templateUrl dynamic path

Question

I am having an issue with the templateUrl: portion of the angular directives. I am trying to set a dynamic path however it does not seem to work and I can't figure it out. I checked the syntax and everything seems to checkout, it just does not pull the template from that URL.

Here is my directive code:

var app = angular.module('docMan', ['ui.sortable']);

//global variable

app.run(['$rootScope','getResourceURL', function($rootScope, getResourceURL){

	getResourceURL('FOPS_Resource').then(function(result){$rootScope.FOPSbaseURL = result;
	},
						function(error){$scope.error = result;})

	
}]);

//Handle to grab SF info about the Static Resource base URL
app.factory('getResourceURL', ['$q','$rootScope', function($q, $rootScope){

		return function (inputString) {

			var deferred = $q.defer();

			Visualforce.remoting.Manager.invokeAction(
				'FO_Manager.GetResourceURL', 
				inputString,
				function(result, event){
					$rootScope.$apply(function(){
					if(event.status) {
						deferred.resolve(result);
					} else {
						deferred.reject(event);
					}
				})
			},
			{buffer: true, escape: true, timeout: 30000}
		);
		return deferred.promise;
	}
}]);

app.directive('sideNav', function($rootScope){

	return{

		restrict: 'E',
	    scope: {
	    	info: '='
	    },
	    templateUrl: function($rootScope){ return $rootScope.FOPSbaseURL + '/js/custom/directives/sideNav.html';}

	};
});

Then when I put the tags <sideNav info="SideNav"></sideNav> where SideNav is in the scope of the controller surrounding it nothing happens the template does not get pulled.

Here is the template:`

                    <li class="mainCat">
                        <a href="#" id="CatHeader">
                            <i class="{{item.displayIcon}} left-bar"></i>
                            <span ng-bind-html="item.label | html"></span>
                        </a>
                        <ul class="subCat"> 


                            <li ng-repeat="subItem in item.docTypes">
                                <a href="#" >
                                <i class="fi-folder"></i>
                                <span ng-bind-html="subItem.Name | html"></span>
                                </a>
                            </li>


                        </ul>
                    </li>

`

Any help on the matter would be greatly appreciated.

UPDATED:

So the now thanks to the help below something did display but now the issues is that $rootScope.FopSbaseURL doesn't populate properly in this `app.directive('foSidenav', function($rootScope){

return{

    restrict: 'E',
    scope: false,
    templateUrl: function(){ 

        $rootScope.snipSideNav = $rootScope.FOPSbaseURL + '/js/custom/directives/sidenav.html';
        return $rootScope.snipSideNav;


    }
};

}); ` it is what I want in the rootScope but it doesn't pull in the templateURL

Do you see that at least app trying to hook your template with http request or your issue only missing $rootScope? — Appeiron
– Appeiron, Commented Nov 4, 2015 at 22:26

Javier Conde · Accepted Answer · 2015-11-04 18:42:45Z

2

From the AngularJS documentation:

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

You should use this:

<side-nav info="SideNav"></side-nav>

More info in https://docs.angularjs.org/guide/directive

edited Nov 4, 2015 at 18:42

answered Nov 4, 2015 at 18:37

Javier Conde

2,58322 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Javier Conde Over a year ago

No problem :) I've realized that it is not only as tag names, it should be for any directive used in the view, I'm editing it now. I left SideNav as it was originally because I don't know if it's mean to trigger the directive or it is some other kind of reference he wants to use.

Tekill Over a year ago

So the naming thing helped me resolve one issue, not it display something but now I am having another issue

Tekill Over a year ago

Thanks that comment helped because now it displays something but I am having trouble accessing a variable in my rootscope

Tekill Over a year ago

Any idea on how to get $rootScope.FOPSbaseURL to pass to templateURL

Javier Conde Over a year ago

Hi, in order to debug that you will need to share your code in a JSFiddle so we can reproduce the problem and see if we can fix it, I am not familiar with getResourceURL, I don't know if it is even standard AngularJS, the documentation does not say anything about it.

Collectives™ on Stack Overflow

AngularJS V1.4.7 directive templateUrl dynamic path

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related