Question

我正在编写我认为简单的指令来获取ng-repeat内的任何文本，如果大于50个字符，则删除文本的其余部分并添加省略号。我的重复被简单地定义为：

<li ng-repeat="result in topSuggestions.suggestions">
    <h4>{{result.title}</h4>
    <p suggestion-limiter>{{result.text}}</p>
</li>

指令：

app.directive("suggestionLimiter", [function () {
    return {
        restrict: "A",
        link: function (scope, elem, attrs) {
            console.log($(elem).text());
            var maxTextLength = 50;
            var ellipses = "...";
            var currentText = $(elem).text();

            if (currentText.length > maxTextLength) {
                 currentText = currentText.substr(0, maxTextLength - ellipses.length) + ellipses;
                 $(elem).text(currentText);
            }
        }
    }
}]);

console.log($(elem).text())导致{{result.text}}。我尝试使用if (scope.$last)等待ng-repeat完成但仍然得到相同的结果。我在这个上缺少一些简单的东西吗？

Answer 1

另一方面，我不认为指令适合这项工作。使用过滤器而不是指令来更改表达式的结果。类似的东西：

filter('ellipsis', function() {
  var ellipsis = '...';
  return function(text, limit) {
    text = typeof(text) !== 'undefined'? text: '';
    return text.length > limit?
      (text.substr(0, limit - ellipsis.length) + ellipsis):
      text;
  }
});

然后以某种方式在ng-repeat

的上下文中使用它

 <ul>
   <li ng-repeat="item in list" ng-bind="item|ellipsis:50"></li>
 </ul>

检查这是否有效example我做了。

Answer 2

尝试使用$timeout(function() { ... });包装函数体。这应该确保数据绑定已经完成。

app.directive("suggestionLimiter", ["$timeout", function ($timeout) {
    return {
        restrict: "A",
        link: function (scope, elem, attrs) {
            $timeout(function() {
                console.log($(elem).text());
                var maxTextLength = 50;
                var ellipses = "...";
                var currentText = $(elem).text();

                if (currentText.length > maxTextLength) {
                    currentText = currentText.substr(0, maxTextLength - ellipses.length) + ellipses;
                    $(elem).text(currentText);
                }
            });
         }
    }
}]);

Answer 3

您可以将文本作为指令的数据属性，并观察其变化，从而无需超时。（代码非常粗糙，但展示了基本思想。）编辑更新代码，使其更加数据属性驱动，因为解决方案就是这样。

http://plnkr.co/edit/n4Y89BY5KfZDpBBZJldz?p=preview

<body ng-controller="test">
<h1>Hello Plunker!</h1>

<div ng-repeat="item in data">
  <span data-limit="5" 
        data-overflow-text = ".."
        data-text="{{item}}" 
        suggestion-limiter></span>
</div>
<script>

  var app=angular.module("app",[]);

  app.directive("suggestionLimiter", function () {

    return {
        restrict: "A",
        link: function (scope, elem, attrs) {

            var maxTextLength = attrs.limit*1,
                overflowText = attrs.overflowText;

            attrs.$observe("text",function(v){
              if (v.length > maxTextLength) {
                 v = v.substr(0, maxTextLength - overflowText.length) + overflowText;
                 $(elem).text(v);
            }
            });


          }

        }
  });

app.controller("test", function($scope){

  $scope.data=[ "ssssssdsadsdddddd",
                "sssdsadsdddddikk",
                "adsssssssssdsadsdddod",
                "adsssssssssdsadsddioddd",
                "adsssssssssdsadsddkk'pdd",
                "8-adsdddddd",
                "6767ddd88809909"];
});

angular.bootstrap(document,["app"]);
</script>

ng-repeat中的Angular指令获取预编译值

3 个答案: