2015-03-14 4 views
6

Как добавить событие ng-click в глифов-загрузчик в текстовое поле? Событие не уволят ...Событие клика на glypicon

<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

ответ

5

Это происходит потому, что glyphicons обеспечены «указатель событий: нет;» по умолчанию можно переопределить его и удалить эту функцию с помощью простого 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

+0

хорошо пятнистый! Какова идея указателей-событий: нет? – Manube

+0

Это имеет смысл, спасибо! – Tjoepke

+0

@Manube это применяется к глификон из-за класса .form-control, и идея состоит в том, чтобы показать вход и глификон как единый объект. – squiroid

Смежные вопросы