AngularJS V1.4.7指令templateUrl動態路徑

Question

我在angular指令的templateUrl:部分遇到問題。 我正在嘗試設置一條動態路徑，但是它似乎不起作用，我無法弄清楚。 我檢查了語法，所有內容似乎都已簽出，只是沒有從該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在其周圍的控制器范圍內，沒有任何反應，模板不會被拉出。

這是模板：

                    <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對元素的標記和屬性名稱進行歸一化，以確定哪些元素與哪些指令匹配。 我們通常通過區分大小寫的camelCase標准化名稱（例如ngModel ）來引用指令。 但是，由於HTML不區分大小寫，因此我們以小寫形式引用DOM中的指令，通常在DOM元素（例如ng-model ）上使用破折號分隔的屬性。

您應該使用此：

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

有關更多信息， 請參見https://docs.angularjs.org/guide/directive