1

我制作了一个 AngularJS 指令来添加省略号来溢出：隐藏文本。它似乎在 Firefox 中不起作用，而且我不相信我已经尽可能地构建了它。流程是：

  1. 向 HTML 元素添加指令属性
  2. 指令将 ng-bind 属性读入作用域
  3. 指令监视链接功能中 ng-bind 的更改
  4. 在 ng-bind 更改时，指令会进行一些花哨的计算来确定应该在哪里拆分文本并添加省略号（我没有在此处包含此代码，只是假设它有效）
  5. 指令将元素的 HTML 设置为等于这个新字符串，而不涉及 ng-bind

HTML

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

指示

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)

我假设应该使用一些模板样式的方法？我不清楚如何最好地接近答案。谢谢你的帮助。

4

2 回答 2

10

You could use a filter instead. Something like this:

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-31T22:05:02.787 回答
0

如果你用它替换data-ng-bind="articleText"它ng-model="articleText"应该在 Chrome 和 Firefox 中都可以工作。我不知道为什么，也许这是一个错误？但这是一个快速修复。

如果您对差异感兴趣，可以看看这篇文章。但是在不同浏览器中的行为不同确实有点奇怪。

于 2013-07-31T21:19:31.257 回答