Question

我对角度指令的templateUrl:部分存在问题。我试图设置一个动态路径，但它似乎不起作用，我无法弄明白。我检查了语法，一切似乎都要结帐，它只是不从该URL中提取模板。

这是我的指令代码：

＆＃13;

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

＆＃13;

然后，当我将标签<sideNav info="SideNav"></sideNav>放在SideNav所在的控制器范围内时，没有任何事情发生模板不被拉动。

这是模板：`

                    <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（＆＃39; foSidenav＆＃39;，函数）中正确填充（{1}} $ 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规范化元素的标记和属性名称以确定哪些元素匹配哪些指令。我们通常会提到它们区分大小写的camelCase规范化名称的指令（例如 ngModel）。但是，由于HTML不区分大小写，我们参考 DOM中的指令通过小写形式，通常使用 DOM元素上的破折号分隔属性（例如ng-model）。

你应该用这个：

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

https://docs.angularjs.org/guide/directive

中的更多信息

AngularJS V1.4.7指令templateUrl动态路径

1 个答案: