Angular.js：如何從指令獲取渲染文本寬度？

Question

我需要（動態）在ng-repeat塊中的固定長度按鈕內渲染文本。 我想獲得DOM渲染文本寬度（能夠截斷它，並添加省略號實體...）。
這是我的HTML：

 <span ng-repeat="(key, item) in players" limit-text-length max-len="100">
    <div class="btn">
      <div id="player-{{key}}">{{item.name}}</div>
    </div>
 </span>

這是我目前的指令：

app.directive('limitTextLength', function() {
  return function(scope, element, attrs) {
  var maxLen = attrs.maxLen;
  var el = element.find​("[id^=player-]"); // <-- THIS DOESN'T WORK...
  if (el.width() > maxLen) { // check text is not too wide
    while (el.width() > maxLen) {
      var nameTruncated = el.html();
      nameTruncated = nameTruncated.substring(0, nameTruncated.length - 1);
      el.html(nameTruncated);
    }
    el.append('&hellip;');
  }
};

有什么建議嗎？

Answer 1

如果沒有jQuery， element.find("[id^=player-]")將無效，因為Angular的jqLit​​e的find() 僅限於按標簽名稱查找 （根據文檔 ）。

您可以使用本機querySelector()方法，該方法在瀏覽器中具有良好的支持 ：

//var el = element.find("[id^=player-]");
var el = angular.element(element[0].querySelector('[id^="player-"'));

_{當然，沒有jQuery， .width()方法將不可用，但如果你使用jQuery，你的選擇器應該可以正常工作。}

---

還有一個拼寫錯誤： var maxLen = attrs.len; 應該是var maxLen = attrs.maxLen;

---

也就是說，主要問題是元素的實際寬度是在渲染后確定的（在您檢查時沒有發生）。 通過將相關代碼包裝在$timeout內，您可以確保在元素渲染后進行檢查。
您的指令可以像這樣修改（假設包含jQuery）：

app.directive('limitTextLength', function ($timeout) {
    return function(scope, element, attrs) {
        var maxLen = attrs.maxLen;
        var el = element.find("[id^=player-]");
        $timeout(function () {
            if (el.width() > maxLen) { // check text is not too wide
                while (el.width() > maxLen) {
                    console.log(el.width());
                    var nameTruncated = el.html();
                    nameTruncated = nameTruncated.substring(0, nameTruncated.length - 1);
                    el.html(nameTruncated);
                }
                el.append('…');
            }
        });
    };
});

另見這個簡短的演示 。

---

順便說一句，如果只是省略號，你可以使用CSS3的text-overflow屬性。