javascript - 如何将 ng-bind/ng-bind-template 用于 HTML5 数据属性

标签 javascript html angularjs custom-data-attribute ng-bind-html

在我的代码中,我有一个按钮,我使用 HTML 数据属性和 Angular.js 表达式将数据附加到该按钮以向其显示通知。代码是这样的

<button type="button" 
        class="btn btn-link navbar-btn" 
        data-notifications={{tweetCount}}> 
    <span class="twitter-edit" ></span>
</button>

但是使用表达式的坏处可以发现 here 。因此,显然解决方案是使用 ng-bindng-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/

相关文章:

javascript - 如何使用 ES6 import 或 require 导入简单的 JS 脚本 "globally"?

javascript - 不间断ajax请求

Javascript 数组不打印/输出 NaN 或 0

javascript - 使用 Angularjs 显示数据库中的数据

javascript - AngularJS 在数字输入字段中显示 2 个小数点

javascript - 避免多次点击 AngularJS 中的按钮

javascript - 基本的 jquery fiddle 到 Angular 指令

javascript - 如何将相同的选项附加到多个选择下拉框?

html - 列表元素之间的破折号

javascript - 父窗口中的 Iframe 的 onSubmit 可以吗?