使用ui.bootstrap.tooltip指令覆盖title属性

Question

我正在尝试创建一个指令定义，以便当有一个带有title属性的元素时，它将替换为工具提示指令（from ui.bootstrap）。到目前为止，这是我的指示：

'use strict';

angular.module('app.components.directives.title', [
  'ui.bootstrap.tooltip'
])
.directive('title', function($compile) {

  return {
    priority: 1,
    compile: function(tElement, tAttrs) {
      tElement.attr('tooltip', tElement.attr('title'));
      tElement.removeAttr('title');;
    }
  };

});

以下是我的测试：

'use strict';

describe('Directive: title', function () {

  var element, scope, rootScope, compile;

  // load the directive's module
  beforeEach(module('app.components.directives.title'));

  beforeEach(inject(function ($compile, $rootScope) {
    // Cache these for reuse    
    rootScope = $rootScope;
    compile = $compile;

    // Set up the outer scope
    scope = $rootScope.$new();
    scope.message = 'hello';

    // Define and compile the element
    element = angular.element('<div title="Tooltip message: {{ message }}"></div>');
    element = compile(element)(scope);
    scope.$digest();
  }));

  it('should replace the title attribute with a tooltip attribute', function() {
    expect(element.attr('tooltip')).toEqual('Tooltip message: {{ message }}');
  });

  it('should get rid of the title attribute', function() {
    expect(element.attr('title')).toBeFalsy();
  });

});

第一次测试通过，但是当我在实际应用程序中使用它时，工具提示指令永远不会被注册。第二次测试失败，因为标题不知何故。我有预感，因为我在标题值中{{binding}}，但我不太确定如何修复。

TLDR：工具提示无法编译，标题仍然存在。