在我的代码中,我有一个按钮,我使用 HTML 数据属性和 Angular.js 表达式将数据附加到该按钮以向其显示通知。代码是这样的
<button type="button"
class="btn btn-link navbar-btn"
data-notifications={{tweetCount}}>
<span class="twitter-edit" ></span>
</button>
但是使用表达式的坏处可以发现 here 。因此,显然解决方案是使用 ng-bind
或 ng-bind-template
。
但是我该如何对数据属性执行此操作呢?在我的 CSS 中,我为 data-notification
声明了一个样式
[data-notifications]:after {
content: attr(data-notifications);
position: absolute;
top:1.75em;
right: -0.5em;
}
上面显示 {{tweetCount}}
的代码对我有用。唯一的问题是,在页面加载时,实际上会向用户显示一瞬间的双花
。为了解决这个问题,建议使用ng-bind/ng-bind-template
。但就我而言,我必须将其应用于数据属性标记。
最佳答案
我认为您只是缺少 Handlebars 周围的引号。
<button type="button"
class="btn btn-link navbar-btn"
data-notifications="{{tweetCount}}"> <---quotes around the handle-bars
<span class="twitter-edit" ></span>
</button>
关于javascript - 如何将 ng-bind/ng-bind-template 用于 HTML5 数据属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29924101/