PRÓBNY

Rozważ następującą dyrektywę:

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

Dyrektywa dodaje oba<span> i<a> do DOM (tylko jeden jest widoczny na raz).

Jak mogę przepisać dyrektywę tak, aby dodałazarówno<span> lub<a> do DOM, ale nie do obu?

AKTUALIZACJA

OK, chyba mógłbym użyćng-if tak:

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

Ale jak można pozbyć się otoczenia<span> w tym przypadku?

AKTUALIZACJA 2

Oto wersja dyrektywy, która używa$compile. Nie ma otoczenia<span>, ale dwukierunkowe powiązanie danych również nie działa. Jestem naprawdę zainteresowany, aby dowiedzieć się, jak rozwiązać problem wiązania danych dwukierunkowych. Jakieś pomysły?

PRÓBNY

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