是否可以將服務注入Angular 1.5組件的templateUrl屬性？

Question

我的指令需要一個常量（MODULE_ROOT_URL）來生成模板路徑。 使用指令語法，我可以將常量注入目錄工廠函數。 如何將此指令轉換為Angular 1.5組件？ 是否可以將服務注入Angular 1.5組件？

謝謝。

更新：我知道可以將服務注入組件控制器。 但是，如何為組件的templateUrl屬性注入服務？

Update2：請參閱plnkr。 我創建了指令和組件版本。 指令版本工作正常。 但組件版本有錯誤[ngTransclude：orphan]

https://plnkr.co/edit/DMumuIpXJY6RDCX6XObz?p=preview

angular.module('AbcModule')
       .directive('abcDirective', ['MODULE_ROOT_URL', function (MODULE_ROOT_URL) {
           return {
               restrict: 'E',
               templateUrl:  MODULE_ROOT_URL + 'abc/abc.tpl.html'
           }

       }]);

Answer 1

templateUrl和template可以是函數，也可以注入依賴項。

angular.module('AbcModule')
.component('abcDirective',  {
     restrict: 'E',
     templateUrl:  function(MODULE_ROOT_URL) {
          return MODULE_ROOT_URL + 'abc/abc.tpl.html';
     }
});

Answer 2

直到Angular 1.4， directive DDO已經被函數返回，你可以在一個地方有依賴。 但是在Angular 1.5.3中我們可以有一個控件來在組件的controller中添加依賴。 你可以在控制器內部使用ng-include和注入依賴關系，如下所示。

標記

angular.module('AbcModule')
.component('abcDirective', {
  template: '<div ng-include="$ctrl.rootUrl ? $ctrl.rootUrl + \'abc/abc.tpl.html\': \'\'"></div>',
  controller: function(MODULE_ROOT_URL) { //<--injected dependency here.
    var self = this;
    self.rootUrl = MODULE_ROOT_URL;
  }
}]);