Dynamic templateUrl in directives

[coli]

I'd like to be able to have templateUrl be configurable

eg

<my-directive templateUrl="hard-coded-path'>

Right now, this can be done via compile()

        compile:function(tElement, tAttrs, transclude) {
            var html = $templateCache.get(tAttrs.templateUrl);
            tElement.html(html);
        },

Problem is this only works for inline template, I'd like to be able to fetch it via network if it is not available yet.

Ideally, the delayed compile function associated with templateUrl processing in Angular should be exposed to directive writers.

Very ideally, I'd like to be able to

<my-directive templateUrl="{{scope.templateUrl}}">

[IgorMinar]

not quite what you want but this will work:

myApp.directive('foo', function($http, $templateCache) {
  return {
    compile: function(tElement, tAtrrs) {
      $http.get(tAttrs.templateUrl, {cache: $templateCache}).success(function(html) {
        t.Element.html(html);
      });
    }
  }
});

the problem here is that the template is not compiled. to compile it you'd have to inject $compile service, compile the fetched html template. To link the compiled template with a scope, you'd have to return a linking fn from the compile fn that will keep a reference to the scope. Yeah, it's a lot of work, but it's doable. :-)

we'll consider this RFE post 1.0

[dcu]

+1. many people is asking this feature so what are the main reasons to not implement it?

[casio]

+1

[abdulazeezsk]

+1

[olostan]

Did someone completed solution @IgorMinar suggested?

I have similar problem: I have a directive, which content depends on some data, that should be loaded from resource (full problem is: I what validations/presentations of model elements loaded from backend. So I'll have kind of and type of field is loaded from backend, and only after it is loaded I can decide which template to compile...

For not the only way how to achieve that is try to implement idea, mentioned at @IgorMinar's comment.

[teintinu]

Hi Coli, maybe my fork help you: https://github.com/josefernandotolentino/angular.js

Use can use parameters in route templateUrl:

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/view/:id', {templateUrl: 'partials/partial{{id}}.html', controller: MyCtrl2});

    $routeProvider.otherwise({redirectTo: '/view/1'});
  }]);

[pkozlowski-opensource]

@josefernandotolentino you are talking about different templateUrl - the original issue was opened for directives while you are talking about templateUrl being used in a route definition...

[teintinu]

ok pkoz, for this reason I said "maybe".

[etchemkay]

Based on @IgorMinar 's comments above, I was able to quickly able to come up with a working solution. Now, all I want to know is whether this is the "right" solution, in terms of efficiency/correctness. Any "gotcha"s that I may have overlooked ?

Off-Topic: By the way, I just went from "heard of AngularJS for the first time" to "learning AngularJS" to "single-handedly fully re-wrote a moderately complex mobile application" in 3 weeks time (which took a team of three 2.5 months to do in jQMobile & Mustache) ! That says a lot for just how fantastic AngularJS is. Big fan right here.

Here's the code. It should be simple enough to imagine the rest of the (controller and template) code -

// activity items can be of several types .. post-photo, status-change, etc. (think facebook activity stream)
App.directive('activityItem', ['$compile', '$http', '$templateCache', function($compile, $http, $templateCache) {
  var templateText, templateLoader,
    baseURL = 'partial/tpl/',
    typeTemplateMapping = {
      photo:    'photo-activity-item.html',
      status: 'status-activity-item.html'
    };

  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      type: '@type', title: '=', authorName: '=', avatar: '=', timeAgo: '=',
      statsLikes: '=', statsViews: '=' // some basic stats for your post
    },
    compile: function(tElement, tAttrs) {
      var tplURL = baseURL + typeTemplateMapping[tAttrs.type];
      templateLoader = $http.get(tplURL, {cache: $templateCache})
        .success(function(html) {
          tElement.html(html);
        });

      return function (scope, element, attrs) {
        templateLoader.then(function (templateText) {
          element.html($compile(tElement.html())(scope));
        });
      };
    }
  };
}])

<!-- simple bootstrap list for, say, all photo posts (hence the hardcoded @type) -->
<ul class="nav nav-list">
  <li ng-repeat="post in posts">
    <activity-item
      type="photo"
      title="post.postTitle"
      author-name="post.creatorName"
      time-ago="post.formattedCreatedTimestamp"
      stats-likes="post.likeCount" stats-views="post.viewsCount"
      stats-comments="post.threadCount"
      avatar="post.creatorAvatarPath" >
    </activity-item>
  </li>
</ul>

[tkrotoff]

@etchemkay I use a similar method to re-use a form (so no copy-paste) for editing and creating (CRUD), in this context it is editing and creating a calendar event:

app.directive('eventForm', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '_form.html',
    scope: {
      event: '=' // event attribute is binded to the event object of the directive
    }
  };
});

Note the use of templateUrl inside the directive so you don't have to use $http.get.

<!-- _form.html -->
<input type="text" ng-model="event.title">
<textarea ng-model="event.description"></textarea>
[...]

<h1>Create new calendar event</h1>
<form>
  <event-form event="event"></event-form>
  [...]
</form>

<h1>Edit existing calendar event</h1>
<form>
  <event-form event="event"></event-form>
  [...]
</form>

For sure the use of ng-include would be better:

<h1>Create new calendar event</h1>
<form>
  <ng-include src="'_form.html'"></ng-include>
  [...]
</form>

Ideally I would prefer to use directives for JavaScript code and re-use HTML code through ng-include.

[jgrund]

+1

[ArturGajowy]

+1

[ryanzec]

+1

[vizo]

+1

[lrlopez]

I've proposed an implementation of dynamic templates using functions in #1849. Take a look, may be it fits your needs.