CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Tekill
Tekill

Reputation: 1201

AngularJS V1.4.7 directive templateUrl dynamic path

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

Upvotes: 0

Views: 270

Answers (1)

Javier Conde
Javier Conde

Reputation: 2593

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

Upvotes: 2

Related Questions