directive.js

app.directive('rewriteAsSpan', function($compile){
  return {
    restrict: 'A',
    template: '<span />',
    replace: true,

    // we transclude the element because when it gets replaced with the span
    // we want all the properties from the original element
    transclude: 'element',

    compile: function(tElement, tAttrs){

      return {
        post: function(scope, element, attrs, controller, transclude){
          var rewrittenEl, originalEl;

          transclude(scope, function(clone){
            originalEl = clone;
          });


          scope.$watch(attrs.rewriteAsSpan, function(value){
            if (value === undefined || value === true){
              if (!rewrittenEl){
                // lazy compile and cache the rewritten element
                transclude(scope, function(clone){
                  rewrittenEl = tElement;
                  rewrittenEl.html(clone.html());
                  // remove this directive because the $compile would get infinite
                  rewrittenEl.removeAttr('rewrite-as-span');
                  $compile(rewrittenEl)(scope);
                });

              }

              element.replaceWith(rewrittenEl);
              element = rewrittenEl;

            } else {
              element.replaceWith(originalEl);
              element = originalEl;
            }
          });

        }
      };
    }
  };
});

spec.js

/* global describe, ddescribe, it, xit, expect */
/* global beforeEach */

"use strict";

require('angular-mocks/angular-mocks');
var mock = angular.mock,
    module = mock.module;




describe("rewriteAsSpan directive", function() {
  require('../admin/TestView');

  var $compile, $rootScope;

  beforeEach(module('admin'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));


  it("rewrites a link as a span", function() {
    var element = angular.element('<div />').append(
          '<a rewrite-as-span>HELLO</a>');
    $compile(element)($rootScope);
    $rootScope.$digest();

    element = element.contents();
    expect(element[0].tagName).toBe("SPAN");
  });

  it("rewrites the link if the attr value is true", function() {
    var element = angular.element('<div />').append(
          '<a rewrite-as-span="true">HELLO</a>');
    $compile(element)($rootScope);
    $rootScope.$digest();

    element = element.contents();
    expect(element[0].tagName).toBe("SPAN");
  });

  it("does not rewrite the link if the attr value is false", function() {
    var element = angular.element('<div />').append(
          '<a rewrite-as-span="false">HELLO</a>');
    $compile(element)($rootScope);
    $rootScope.$digest();

    element = element.contents();
    expect(element[0].tagName).toBe("A");
  });

  it("preserves all additional attributes", function() {
    var element = angular.element('<div />').append(
          '<a rewrite-as-span foo="bar">Hello</a>');
    $compile(element)($rootScope);
    $rootScope.$digest();

    element = element.contents();
    expect(element[0].tagName).toBe("SPAN");
    expect(element.attr('foo')).toEqual('bar');

  });

  it("preserves the inner html of the link", function() {
    var element = angular.element('<div />').append(
          '<a rewrite-as-span>HELLO</a>');
    $compile(element)($rootScope);
    $rootScope.$digest();

    element = element.contents();
    expect(element.text()).toEqual('HELLO');
  });

  it("interpolates the contents of the link", function() {
    var element = angular.element('<div />').append(
          '<a rewrite-as-span>{{name}}</a>');
    $rootScope.name = 'Sigmund';
    $compile(element)($rootScope);

    $rootScope.$digest();

    element = element.contents();
    expect(element.text()).toEqual('Sigmund');
  });

  describe("Interpolation of the attr value", function() {
    it("rewrites if expression eval's to true", function() {
      var element = angular.element('<div />').append(
            '<a rewrite-as-span="{{should_rewrite}}"></a>');
      $rootScope.should_rewrite = true;
      $compile(element)($rootScope);

      $rootScope.$digest();

      element = element.contents();
      expect(element[0].tagName).toEqual('SPAN');

    });

    it("does not rewrite if expression eval's to false", function() {
      var element = angular.element('<div />').append(
            '<a rewrite-as-span="{{should_rewrite}}"></a>');
      $rootScope.should_rewrite = false;
      $compile(element)($rootScope);

      $rootScope.$digest();

      element = element.contents();
      expect(element[0].tagName).toEqual('A');

    });

    describe("Dynamic responses when the attr value changes", function() {
      it("can rewrite to span", function() {
        var element = angular.element('<div />').append(
              '<a rewrite-as-span="should_rewrite"></a>');
        $rootScope.should_rewrite = false;

        $compile(element)($rootScope);
        $rootScope.$digest();
        expect(element.contents()[0].tagName).toEqual('A');


        $rootScope.should_rewrite = true;
        $rootScope.$apply();

        element = element.contents();
        expect(element[0].tagName).toEqual('SPAN');
      });

      it("can undo the rewrite", function() {
        var element = angular.element('<div />').append(
              '<a rewrite-as-span="should_rewrite"></a>');
        $rootScope.should_rewrite = true;

        $compile(element)($rootScope);
        $rootScope.$digest();
        expect(element.contents()[0].tagName).toEqual('SPAN');


        $rootScope.should_rewrite = false;
        $rootScope.$apply();

        element = element.contents();
        expect(element[0].tagName).toEqual('A');
      });

    });

  });
});