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

Clean way to copy element text into title attribute with AngularJS

本文关键字：属性 方法 title AngularJS 元素 文本 复制 使用      更新时间：2023-09-26

我在一个表中有这样的东西：

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

我使用CSS在溢出时显示省略号，我希望在悬停时显示一个工具提示，显示单元格的全部预期内容，从而使用title属性。在上面的例子中，这还不错，但在其他情况下，我有更复杂的AngularJS表达式和过滤器等，我讨厌在内容和标题属性中重复同样的事情。

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

如果这是一个新手问题，很抱歉，但我是AngularJS的新手，我在谷歌上寻找解决方案的尝试没有成功。

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

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。

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

相关文章：