How to conditionally apply a template via custom Angular directives?

Question

DEMO

Consider the following directive:

angular.module('MyApp').directive('maybeLink', function() {   return {     replace: true,     scope: {       maybeLink: '=',       maybeLinkText: '='     },     template: '<span>' +                '  <span ng-hide="maybeLink" ng-bind-html="text"></span>' +               '  <a ng-show="maybeLink" href="#" ng-bind-html="text"></a>' +               '</span>',     controller: function($scope) {       $scope.text = $scope.maybeLinkText.replace(/\n/g, '<br>');     }   };  }); 

The directive adds both the <span> and the <a> to the DOM (only one is visible at a time).

How could I rewrite the directive such that it will add either <span> or <a> to the DOM, but not both?

---

UPDATE

OK, I guess I could use ng-if like that:

template: '<span>' +            '  <span ng-if="!maybeLink" ng-bind-html="text"></span>' +           '  <a ng-if="maybeLink" href="#" ng-bind-html="text"></a>' +           '</span>' 

But, how could one get rid of the surrounding <span> in this case?

---

UPDATE 2

Here is a version of the directive that uses $compile. It doesn't have the surrounding <span>, but the two way data binding doesn't work either. I'm really interested to know how to fix the two way data binding issue. Any ideas?

DEMO

angular.module('MyApp').directive('maybeLink', function($compile) {   return {     scope: {       maybeLink: '=',       maybeLinkText: '='     },     link: function(scope, element, attrs) {       scope.text = scope.maybeLinkText.replace(/\n/g, '<br>');        if (scope.maybeLink) {         element.replaceWith($compile('<a href="#" ng-bind-html="text"></a>')(scope));       } else {         element.replaceWith($compile('<span ng-bind-html="text"></span>')(scope));         }      }    };  }); 

Answer 1

You might be able to use a template function. According to the docs:

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.

---

function resolveTemplate(tElement, tAttrs) {  }  angular.module('MyApp').directive('maybeLink', function() {   return {     //...     template: resolveTemplate,     //...   };  }); 

Answer 2

I think this is the cleanest way to inject a dynamic template based on a scope property

angular.module('app') .directive('dynamic-template', function () {   return {     template:'<ng-include src="template"/>',     restrict: 'E',     link: function postLink(scope) {       scope.template = 'views/dynamic-'+scope.type+'.html';     }   }; })