3

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

谢谢。

更新：我知道服务可以注入到组件控制器中。但是如何为组件的 templateUrl 属性注入服务呢？

更新 2：请参阅 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'
           }

       }]);
4

2 回答 2

9

templateUrl并且template可以是可以注入的函数和依赖项。

angular.module('AbcModule')
.component('abcDirective',  {
     restrict: 'E',
     templateUrl:  function(MODULE_ROOT_URL) {
          return MODULE_ROOT_URL + 'abc/abc.tpl.html';
     }
});
于 2016-04-15T10:56:20.760 回答
0

在Angular 1.4 之前，directiveDDO 一直由函数返回，您可以在其中拥有依赖项。但是在 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;
  }
}]);
于 2016-04-13T15:57:19.370 回答