AngularJS V1.4.7 директива templateUrl динамический путь

Question

У меня проблема с частью угловых директив templateUrl:. Я пытаюсь установить динамический путь, но он, похоже, не работает, и я не могу понять это. Я проверил синтаксис, и все, похоже, проверяется, он просто не вытаскивает шаблон из этого URL-адреса.

Вот моя директива код:

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

 
//global variable 
 

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

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

 
\t 
 
}]); 
 

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

 
\t \t return function (inputString) { 
 

 
\t \t \t var deferred = $q.defer(); 
 

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

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

 
\t return{ 
 

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

 
\t }; 
 
});

Тогда, когда я поставить метки <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> 

`

Любая помощь по этому вопросу было бы весьма признателен.

ОБНОВЛЕНО:

So теперь благодаря помощи ниже чем-то сделал дисплей, но теперь проблемы в том, что $rootScope.FopSbaseURL не заполняет должным образом в этом `app.directive («foSidenav», функция ($ 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:

Угловая нормализующий тег элемента и имя атрибута для определения , которые соответствуют элементы, которые директивы. Обычно мы ссылаемся на директивы по их регистрозаемому наименованию с учетом кода camelCase (например, ngModel). Однако, поскольку HTML нечувствителен к регистру, мы ссылаемся на директивы в DOM формами нижнего регистра, как правило, используя атрибуты с разделителями-лимитами на элементах DOM (например, ng-model).

Вы должны использовать это:

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

Более подробная информация в https://docs.angularjs.org/guide/directive