DEMO

Considere a seguinte diretiva:

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>');
    }
  }; 
});

A diretiva acrescenta tanto<span> e a<a> para o DOM (apenas um é visível de cada vez).

Como eu poderia reescrever a diretiva de modo a adicionarou<span> ou<a> para o DOM, mas não os dois?

ATUALIZAR

OK, eu acho que eu poderia usarng-if Curtiu isso:

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

Mas, como alguém poderia se livrar dos arredores<span> nesse caso?

ATUALIZAÇÃO 2

Aqui está uma versão da diretiva que usa$compile. Não tem o ambiente<span>, mas a ligação de dados bidirecional também não funciona. Estou realmente interessado em saber como corrigir o problema de vinculação de dados bidirecional. Alguma ideia?

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));  
      } 
    } 
  }; 
});