Is it possible to inject a service into Angular 1.5 component's templateUrl property?

Question

My directive needs a constant (MODULE_ROOT_URL) to generate the template path. With directive syntax, I can inject the constant to the directory factory function. How can I convert this directive to Angular 1.5 components? Is it possible to inject a service into Angular 1.5 components?

Thanks.

Update: I know the service can be injected into the component controller. But how can I inject a service for a component's templateUrl property?

Update2: Please see plnkr. I create both of directive and component version. The directive version works fine. But the component version has error [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'
           }

       }]);

Possible duplicate of [angularjs 1.5 component dependency injection](http://stackoverflow.com/questions/34891397/angularjs-1-5-component-dependency-injection) — medievalgeek, Apr 13 '16 at 15:54

score 9 · Accepted Answer · edited Apr 16 '16 at 20:07

9

templateUrl and template can be functions and dependencies can injected.

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

edited Apr 16 '16 at 20:07

Pankaj Parkar

134,766
23
234
299

answered Apr 15 '16 at 10:56

a better oliver

26,330
2
58
66

@PankajParkar That's true for `.directive`, but not for `.component`. Feel free to read the docs and try it out. – a better oliver Apr 16 '16 at 19:58
apologies, you are awesome. +1, I will delete mine answer, once OP accept this answer.. Just I added comment in my answer to notify your answer is correct one. :-) – Pankaj Parkar Apr 16 '16 at 20:08
2

you should note that the injection method shown here isn't minification-safe. The value of templateUrl may also be an array where the injectable services are specified as strings, and the last item in the array is the function `templateUrl: ['MY_CONST', function (MY_CONST) { ... }]` – danwellman May 25 '16 at 13:53

Pankaj Parkar · Answer 2 · 2016-04-13T21:24:21.457

0

Till Angular 1.4, directive DDO has been return by function where you can have dependencies in a place. But here in Angular 1.5.3 we can have a control to add dependency inside controller of component. You could have work around like below using ng-include & injecting dependency inside a controller.

Markup

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

edited Apr 13 '16 at 21:24

answered Apr 13 '16 at 15:57

Pankaj Parkar

134,766
23
234
299

Thanks. But it doesn't work with ng-transclude. If the template includes ng-transclude, I have set the transclude: true, the user's content would not be loaded into the component. – Apr 14 '16 at 14:20
@thermostat can you provide me plunkr/fiddle? – Pankaj Parkar Apr 14 '16 at 14:40
Thanks. Please see plnkr. I create both of directive and component version. The directive version works fine. But the component version has error [ngTransclude:orphan] https://plnkr.co/edit/DMumuIpXJY6RDCX6XObz?p=preview – Apr 14 '16 at 15:18
@thermostat look at the above answer added by `zeroflagL` which is promising in your case. – Pankaj Parkar Apr 16 '16 at 20:09

Is it possible to inject a service into Angular 1.5 component's templateUrl property?

2 Answers2