指示

angular.module('plunker').directive('maybeLink',function($compile) {
  return {
    scope: {
      maybeLink: '=',maybeLinkText: '='
    },link: function(scope,element,attrs) {

      scope.$watch('maybeLinkText',function(newVal) {
        scope.text = newVal.replace(/\n/g,'<br>');
      });

      scope.$watch('maybeLink',function() {
        var newEl;
        if (scope.maybeLink) {
          newEl = $compile('<a href="#">{{ text }}</a>')(scope);

        } else {
          newEl = $compile('<span>{{ text }}</span>')(scope);
        } 
        element.replaceWith(newEl);
        element = newEl;
      });

    } 
  };
});

测试

describe('Directive: maybeLink',function() {
  var scope,$compile;

  beforeEach(function() {
    module('plunker');

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

  function compile(html) {
    var element = $compile(html)(scope);
    scope.$digest();
    return element;
  }

  it('should create a link when link URL exists',function() {
    scope.myLinkText = 'Great Video';
    scope.myLinkURL = 'http://www.youtube.com/watch?v=rYEDA3JcQqw';

    var element = compile('<span maybe-link="myLinkURL" maybe-link-text="myLinkText"></span>');

    console.log(element[0].outerHTML); // => <span maybe-link="myLinkURL" maybe-link-text="myLinkText" class="ng-isolate-scope ng-scope"></span> 
    console.log(element.html());       // => (empty string)

    expect(element.text()).toBe('Great Video');
    expect(element.find('a').length).toBe(1);
  });
});