Question

我在表格中有类似的内容：

<tr ng-repeat="book in books">
  <td title="{{book.title}}">{{book.title}}</td>
  <td title="{{book.author}}">{{book.author}}</td>
</tr>

我正在使用CSS在溢出时显示省略号，我希望在悬停时显示工具提示，显示单元格的完整预期内容，从而使用title属性。在上面的例子中它并不是太糟糕，但在其他情况下，我有更复杂的AngularJS表达式与过滤器等，我讨厌在内容和title属性中重复相同的事情。

我可以使用某种AngularJS魔法（可能是指令吗？）自动将生成的元素内容复制到title属性中（反之亦然），如果有，我该怎么做？

很抱歉，如果这是一个新手问题，但我是一个AngularJS新手，而我的Google试图找到解决方案的时间很短。

Answer 1

您可以编写一个非常简单的指令，只需获取内部内容并将其设置为标题：

app.directive('contentTitle', function($timeout) {
    return {
        link: function(scope, element) {
            $timeout(function() {
                element[0].title = element[0].textContent;
            });
        }
    };
});

并像这样使用它：

<tr ng-repeat="book in books">
    <td content-title>{{book.title}}</td>
    <td content-title>{{book.author}}</td>
</tr>

注1：我将代码包装到$timeout中，以确保在元素内容被正确插值后运行。

注意2：如果你支持IE8，那么你应该使用innerText，然后跨浏览器的方式是element[0].textContent || element[0].innerText。

使用AngularJS将元素文本复制到title属性的干净方法

1 个答案:

演示：http://plnkr.co/edit/rXgHwaeScsQdYlFMC7yR?p=preview