Font-awesome Symbol reagiert nicht auf NG-Klick

Question

Ich habe eine Schaltfläche wie folgt. Die Schaltfläche besteht aus <einem> Link, während der Schaltfläche Text ein font-awesome Symbol eines Auges ist.

<a class="action-button ng-scope" 
    ng-click="orderCtrl.showDetails(gridItem)"> 
     <i class="fa fa-eye"></i> 
</a> 

CSS:

.action-button { 
    display: inline-block; 
    padding: 3px 5px 5px 4px; 
    margin: 0 2px; 
    border: 1px solid rgb(172, 172, 172); 
    width: 23px; 
    border-radius: 3px; 
    height: 23px; 
    box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.37) inset; 
    cursor: pointer; 
    line-height: 14px; 
} 
fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    position: relative; 
} 

Nun, was seltsam ist, dass die Taste funktioniert nur, wenn ich außerhalb der font-awesome Augenform im Bereich klicken. Wenn ich in das Auge klicke, wird es nicht ausgelöst.

Answer 1

Sie müssen dort kein Anker-Tag einfügen, da Sie zwei ähnliche Konzepte mischen.

Tun Sie dies stattdessen.

<i class="fa fa-eye" ng-click="showDetails(gridItem)"></i>