AngularJS指令修改NG綁定，並添加省略號

我已經做了一個AngularJS指令添加一個省略號溢出：隱藏文本。它似乎在Firefox中不起作用，我不相信我已經儘可能地構建它。流量是：AngularJS指令修改NG綁定，並添加省略號

添加指令屬性到HTML元素
指令讀取NG-BIND屬性成範圍
指令手錶更改ng綁定在鏈路功能
在納克綁定變化，指令做一些花哨的計算，以確定在何處文本應被拆分的省略號添加（我這裏不包括此代碼，只是假設它的工作原理）
指令設置元素的HTML等於這個新的字符串，不接觸NG綁定

HTML

<p data-ng-bind="articleText" data-add-ellipsis></p>

DIRECTIVE

app.directive('addEllipsis', function(){ 
    return { 
     restrict : 'A', 
     scope  : { 
      ngBind : '=' // Full-length original string 
     }, 
     link  : function(scope, element, attrs){ 
      var newValue; 

      scope.$watch('ngBind', function() { 
       /* 
       * CODE REMOVED - Build shortened string and set to: newText 
       */ 

       element.html(newText); // - Does not work in Firefox and is probably not best practice 
      }); 
     } 
    }; 
});

有問題的行是最後一個指令：

element.html(newText)

我假設一些模板 - 風格的方法應該b使用？我不清楚如何最好地接近答案。謝謝你的幫助。

來源

2013-07-31 Eric Di Bari

如果用ng-model="articleText"更換data-ng-bind="articleText"應該在Chrome和Firefox瀏覽器。我不知道爲什麼，也許這是一個錯誤？但這是一個快速解決方案。

如果你有興趣的差異，你可以看看這個post。但是，不同瀏覽器的行爲有所不同，確實有點奇怪。

來源

2013-07-31 21:19:31 zsong

你可以使用一個filter來代替。事情是這樣的：

FILTER

app.filter('addEllipsis', function() { 
    return function (input, scope) { 
     if (input) { 
      // Replace this with the real implementation 
      return input.substring(0, 5) + '...'; 
     } 
    } 
});

HTML

<p data-ng-bind="articleText | addEllipsis"></p>

來源

2013-07-31 22:05:02

AngularJS指令修改NG綁定，並添加省略號

回答

相關問題