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,
    s         


        

Answer 1

I came up with the following version at the end:

angular.module('MyApp').directive('maybeLink', function($compile) {
  return {
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    link: function(scope, element, attrs) {
      scope.$watch('maybeLinkText', function(newText) {
        scope.text = newText.replace(/\n/g, '
');
      });

      scope.$watch('maybeLink', function() {
        var newElement;

        if (scope.maybeLink) {
          newElement = $compile('')(scope);
        } else {
          newElement = $compile('')(scope);
        }

        element.replaceWith(newElement); // Replace the DOM
        element = newElement;            // Replace the 'element' reference
      });
    }
  };
});