CODEWITHSUNDEEP
javascriptangularjs
dec
dec

Reputation: 604

angularjs component with dynamic templateUrl

is it possible to create a AngularJS Component with a dynamic templateUrl? Means I want to inject a service into the Component that gives me a base path to the template:

i.e.: templateUrl: configuration.baseScriptPath + '...html'

It is possible with a Directive, but how to do this with a Component?

angular.module('runtime')
    .component('textInput', {

        templateUrl: /*configuration.baseScriptPath + */'fd/components/text_input_instance.html',
        controller: [
            '$scope', '$element', 'focusInputGroup', 'configuration',
            function ($scope, $element, focusInputGroup, configuration) {

Upvotes: 4

Views: 6733

Answers (2)

hannad rehman
hannad rehman

Reputation: 4331

templateUrl property of component also takes a function. so you can try this,

angular.module('runtime')
  .component('textInput', {

      templateUrl: ['$configuration', function($configuration) {
        return $configuration.basepath + '.html'
      }],
      controller: [
          '$scope', '$element', 'focusInputGroup', 'configuration',
          function($scope, $element, focusInputGroup, configuration) {

Upvotes: 7

Tomer
Tomer

Reputation: 17930

Instead of templateUrl you can use template and ng-include, like this:

angular.module('runtime')
    .component('textInput', {

        template: '<div ng-include="getTemplate()">',
        controller: [
            '$scope', '$element', 'focusInputGroup', 'configuration',
            function ($scope, $element, focusInputGroup, configuration) {

           $scope.getTemplate = function () {
               return configuration.baseScriptPath + 'fd/components/text_input_instance.html';
          };

Upvotes: 9

Related Questions