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

zkure5ic  于 2023-03-07  发布在  Angular
关注(0)|答案(1)|浏览(129)

在我的代码中,我有一个按钮,我通过使用HTML data属性和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
但是如何对data属性进行此操作呢?在CSS中,我将data-notification的样式声明为

[data-notifications]:after {
    content: attr(data-notifications);
    position: absolute; 
    top:1.75em;
    right: -0.5em;
}

上面显示{{tweetCount}}的代码对我来说是有效的。唯一的问题是,当页面加载时,double curlies实际上在一瞬间显示给用户。要解决这个问题,建议使用ng-bind/ng-bind-template。但在我的情况下,我必须将其应用于数据属性标记。

zujrkrfu

zujrkrfu1#

我想你只是错过了你的车把周围的报价。

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

相关问题