Search code examples
javascriptangularjsangularjs-directiveangularjs-components

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


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'
           }

       }]);

Solution

  • 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';
         }
    });