此自定义指令会中断数据绑定变量

Question

我正在尝试实现一个自定义指令<ticker>，如果文本宽度超过元素中的可用空间，它将允许元素中的文本像鼠标悬停一样滚动。

该指令适用于普通文本，如下所示：

<ticker>A Very Very Long Test Statement</ticker>

但没有像这样的绑定变量：

<ticker>{{item}}</ticker>

我认为这是因为我试图删除指令中的html文本。你可以在这个PLUNKER

中看到

这是我的完整指令：

angular.module('app.directives.ticker', [])
  .directive('ticker', function($interval){
    return { 
      restrict: 'E',
      scope: {},
      link: function(scope, element, attrs){

        var counter = 0;
        var active = false;
        var needed = false;
        var firstIteration = true;
        var originalText = element.html();
        var elementWidth = element.width();
        var textWidth = getTextWidth(element);

        if(textWidth > elementWidth){
          needed = true;
          $interval(startTicker, 25);
        }
        function startTicker(){
          if(firstIteration === true){
            element.html("");
            element.append("<span id='firstTickerItem' class='tickerItem'>" + originalText + "</span>");
            element.append("<span id='secondTickerItem'class='tickerItem'>" + originalText + "</span>");
            firstIteration = false;
          }
          if(counter > textWidth + 19){
            $('#firstTickerItem').remove();
            $('#secondTickerItem').attr("id","firstTickerItem");
            element.append("<span id='secondTickerItem'class='tickerItem'>" + originalText + "</span>");
            counter = 0;
          }
          if(active && needed){
            var leftMostMargin = parseInt($('#firstTickerItem').css('margin-left').replace("px", ""));
            $('#firstTickerItem').css({'margin-left': leftMostMargin - 1 + "px"});
            counter += 1;
          }

        }
        element.mouseenter(function(){
          active = true;
          firstIteration = true;
        });
        element.mouseleave(function(){
          active = false;
          element.html("");

          element.html(originalText);
          counter = 0;
        });
      }
    };
  });

我该如何使用？