feat($compile): support for dynamic template generation

`template` and `templateUrl` properties can now be optionally defined
via a function. This allows templates to be dynamically generated on
the fly.

docs/content/guide/directive.ngdoc

@@ -406,10 +406,18 @@ compiler}. The attributes are:
  migrates all of the attributes / classes from the old element to the new one. See the
  {@link guide/directive#Components Creating Components} section below for more information.
 
+ You can specify `template` as a string representing the template or as a function which takes
+ two arguments `tElement` and `tAttrs` (described in the `compile` function api below) and returns
+ a string value representing the template.
+
  * `templateUrl` - Same as `template` but the template is loaded from the specified URL. Because
  the template loading is asynchronous the compilation/linking is suspended until the template
  is loaded.
 
+ You can specify `templateUrl` as a string representing the URL or as a function which takes two
+ arguments `tElement` and `tAttrs` (described in the `compile` function api below) and returns
+ a string value representing the url.
+
  * `replace` - if set to `true` then the template will replace the current element, rather than
  append the template to the element.
 

src/ng/compile.js

@@ -652,9 +652,14 @@ function $CompileProvider($provide) {
  }
  }
 
- if ((directiveValue = directive.template)) {
+ if (directive.template) {
  assertNoDuplicate('template', templateDirective, directive, $compileNode);
  templateDirective = directive;
+
+ directiveValue = (isFunction(directive.template))
+ ? directive.template($compileNode, templateAttrs)
+ : directive.template;
+
  directiveValue = denormalizeTemplate(directiveValue);
 
  if (directive.replace) {
@@ -977,11 +982,14 @@ function $CompileProvider($provide) {
  // The fact that we have to copy and patch the directive seems wrong!
  derivedSyncDirective = extend({}, origAsyncDirective, {
  controller: null, templateUrl: null, transclude: null, scope: null
- });
+ }),
+ templateUrl = (isFunction(origAsyncDirective.templateUrl))
+ ? origAsyncDirective.templateUrl($compileNode, tAttrs)
+ : origAsyncDirective.templateUrl;
 
  $compileNode.html('');
 
- $http.get(origAsyncDirective.templateUrl, {cache: $templateCache}).
+ $http.get(templateUrl, {cache: $templateCache}).
  success(function(content) {
  var compileNode, tempTemplateAttrs, $template;
 

test/ng/compileSpec.js

@@ -647,6 +647,32 @@ describe('$compile', function() {
  });
 
 
+ describe('template as function', function() {
+
+ beforeEach(module(function() {
+ directive('myDirective', valueFn({
+ replace: true,
+ template: function($element, $attrs) {
+ expect($element.text()).toBe('original content');
+ expect($attrs.myDirective).toBe('some value');
+ return '<div id="templateContent">template content</div>';
+ },
+ compile: function($element, $attrs) {
+ expect($element.text()).toBe('template content');
+ expect($attrs.id).toBe('templateContent');
+ }
+ }));
+ }));
+
+
+ it('should evaluate `template` when defined as fn and use returned string as template', inject(
+ function($compile, $rootScope) {
+ element = $compile('<div my-directive="some value">original content<div>')($rootScope);
+ expect(element.text()).toEqual('template content');
+ }));
+ });
+
+
  describe('templateUrl', function() {
 
  beforeEach(module(
@@ -1215,6 +1241,37 @@ describe('$compile', function() {
  });
 
 
+ describe('template as function', function() {
+
+ beforeEach(module(function() {
+ directive('myDirective', valueFn({
+ replace: true,
+ templateUrl: function($element, $attrs) {
+ expect($element.text()).toBe('original content');
+ expect($attrs.myDirective).toBe('some value');
+ return 'my-directive.html';
+ },
+ compile: function($element, $attrs) {
+ expect($element.text()).toBe('template content');
+ expect($attrs.id).toBe('templateContent');
+ }
+ }));
+ }));
+
+
+ it('should evaluate `templateUrl` when defined as fn and use returned value as url', inject(
+ function($compile, $rootScope, $templateCache) {
+ $templateCache.put('my-directive.html', '<div id="templateContent">template content</span>');
+ element = $compile('<div my-directive="some value">original content<div>')($rootScope);
+ expect(element.text()).toEqual('');
+
+ $rootScope.$digest();
+
+ expect(element.text()).toEqual('template content');
+ }));
+ });
+
+
  describe('scope', function() {
  var iscope;