单击glyphicon上的事件

时间:2015-03-14 09:50:59

标签: angularjs twitter-bootstrap-3 angularjs-ng-click

如何在文本框中的bootstrap glyphicon中添加ng-click事件?这个事件没有被解雇......

<body ng-app ng-init="mymodel='THIS IS MY MODEL'">
    <h3>How to clear the model on remove icon click?</h3>
    <div class="container">
    <div class="form-group has-feedback" >
      <input type="text" class="form-control" ng-model="mymodel"/>
       <i class="glyphicon glyphicon-remove form-control-feedback" 
       ng-show="mymodel" ng-click="mymodel = null"></i>
     </div>
    <p>This is my model: {{mymodel}}</p>

    <strong ng-click="mymodel = null">This works tho...</strong>
    </div>
</body>

Plnkr link

1 个答案:

答案 0 :(得分:5)

这是因为glyphicons提供了“pointer-events:none;”默认情况下,您可以通过简单的CSS覆盖它并删除此功能: - )

 .my .glyphicon {
      pointer-events: all;
    }

<div class="form-group has-feedback my" >
      <input type="text" class="form-control" ng-model="mymodel"/>
       <i class="glyphicon glyphicon-remove form-control-feedback" 
       ng-show="mymodel" ng-click="mymodel = null"></i>
     </div>

Plunker