javascript - AngularJS V1.4.7指令templateUrl动态路径

Question

我的 templateUrl: 有问题 Angular Directive(指令)的一部分。 我正在尝试设置动态路径，但它似乎不起作用，而且我无法弄清楚。我检查了语法，一切似乎都已检查完毕，只是没有从该 URL 中提取模板。

这是我的指令代码:

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';}

	};
});

然后当我放置标签 <sideNav info="SideNav"></sideNav> 时其中 SideNav 位于其周围的 Controller 范围内，没有任何反应，模板不会被拉出。

这是模板:`

                    <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>

`

任何有关此事的帮助将不胜感激。

更新:

现在感谢下面的帮助，确实显示了一些内容，但现在的问题是 $rootScope.FopSbaseURL在此 `app.directive('foSidenav', function($rootScope){

return{

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

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


    }
};

}); ` 这是我在 rootScope 中想要的，但它没有引入 templateURL

Answer 1

来自 AngularJS 文档:

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).

你应该使用这个:

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

更多信息请参见 https://docs.angularjs.org/guide/directive