是否可以将服务注入Angular 1.5组件的templateUrl属性?

时间:2016-04-13 15:52:04

标签: javascript angularjs angularjs-directive angularjs-components

我的指令需要一个常量(MODULE_ROOT_URL)来生成模板路径。使用指令语法,我可以将常量注入目录工厂函数。 如何将此指令转换为Angular 1.5组件? 是否可以将服务注入Angular 1.5组件?

感谢。

更新: 我知道可以将服务注入组件控制器。 但是,如何为组件的templateUrl属性注入服务?

UPDATE2: 请参阅plnkr。我创建了指令和组件版本。 指令版本工作正常。但组件版本有错误[ngTransclude:orphan]

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

{{1}}

2 个答案:

答案 0 :(得分:10)

templateUrltemplate可以是函数,并且可以注入依赖项。

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

答案 1 :(得分:1)

直到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;
  }
}]);