Angularjs ng-attr-title 在 chrome 浏览器中不工作
Angularjs ng-attr-title not working in chrome browser
我正在使用 ng-table 在 table 网格视图中显示所有值。我想在用户悬停单元格时显示一些消息。所以我使用 ng-attr-title 作为工具提示。它在 firfox 中工作,但在 google chrome 网络浏览器中不工作。
Sample
Plunker
谢谢。
那是因为Angular把它变成了data-title="Something"
。您可以使用 CSS 来显示 data-title 属性,或者如果您想要 HTML 标题属性,也可以使用 title="{{ 'Something' }}
。
将 ng-attr-title
替换为 title
。
好像在其他问题中讨论过了。使用 Div 解决这个问题。
我已经编辑了你的 HTML 块:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<table ng-table="tableParams" class="table" ng-controller="ctrl">
<tbody>
<tr ng-repeat="foo in data">
<td data-title="'Name'">{{foo.name}}</td>
<td data-title="'Age'">{{foo.age}}</td>
<td ng-attr-title="{{foo.Desc}}" data-title="'Remarks'" >
<div ng-attr-title="{{foo.Desc}}">{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
完整代码与脚本见此PLUNKER
这就是当你为同一件事做多件事时会发生的事情 objective。
选择一种方式,你可以勇敢地实现你想要的。
ng-attr-title::
<td ng-attr-title="{{foo.Desc}}" >
{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}
</td>
只是标题:
<td title="{{foo.Desc}}" >
{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}
</td>
我正在使用 ng-table 在 table 网格视图中显示所有值。我想在用户悬停单元格时显示一些消息。所以我使用 ng-attr-title 作为工具提示。它在 firfox 中工作,但在 google chrome 网络浏览器中不工作。
Sample
Plunker
谢谢。
那是因为Angular把它变成了data-title="Something"
。您可以使用 CSS 来显示 data-title 属性,或者如果您想要 HTML 标题属性,也可以使用 title="{{ 'Something' }}
。
将 ng-attr-title
替换为 title
。
好像在其他问题
我已经编辑了你的 HTML 块:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<table ng-table="tableParams" class="table" ng-controller="ctrl">
<tbody>
<tr ng-repeat="foo in data">
<td data-title="'Name'">{{foo.name}}</td>
<td data-title="'Age'">{{foo.age}}</td>
<td ng-attr-title="{{foo.Desc}}" data-title="'Remarks'" >
<div ng-attr-title="{{foo.Desc}}">{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
完整代码与脚本见此PLUNKER
这就是当你为同一件事做多件事时会发生的事情 objective。
选择一种方式,你可以勇敢地实现你想要的。
ng-attr-title::
<td ng-attr-title="{{foo.Desc}}" >
{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}
</td>
只是标题:
<td title="{{foo.Desc}}" >
{{foo.Desc | limitTo: 15 }} {{foo.Desc.length > 15 ? '...' : ''}}
</td>