Elemento di bordo strano con ng-clic di materiale angolare

Ho un problema con l'utilizzo di AngularJS e Angular-Material.Elemento di bordo strano con ng-clic di materiale angolare

Date un'occhiata al seguente codice:

<div flex="100"> 
    <ul class="list-group"> 
     <li class="list-group-item cursorPointer" 
     ng-repeat="item in array" ng-click="selectItem(item)"> 
      {{item.name}} 
     </li> 
    </ul> 
</div>

Il tag Li ha una funzione ng-click allegare alla stessa che contiene una logica di business. Il problema è che appare un bordo strano quando si fa clic su di esso (simile all'evidenziazione selezione utente) e non riesco a capire da dove proviene.

Questo sembra apparire solo quando ho una direttiva ng-clic su un elemento (stesso comportamento sull'elemento arco)

Versioni utilizzati:

AngularJS - 1.4.1

angolare Materiale - 0.9.4

Angular-Aria - 1.4.0

Angular-Animate - 1.4.1

Angular-UI-bootstarp - 0.9.0

Bootstrap - 3.2.0

JQuery - 2.1.4

Tutte le idee? Vedere questo plnkr ad esempio: http://plnkr.co/edit/60u8Ur?p=preview

fonte

2015-06-22 Rus Paul

Bootstrap ha per gruppi di articoli di collegamento voce, mi chiedo se angolare bootstrap non si applica il CSS per elemento che sono cliccabili e la lista-group-item . Solo una supposizione. – GillesC

@gillesc Il fatto è che se rimuovo tutti gli script di materiale angolare, l'evidenziazione scompare. Quindi deve essere di materiale angolare, ma non riesco a capirlo da dove esattamente. –

Il tuo problema è la messa a fuoco, si può andare in giro facendo qualcosa di simile

span:focus { 
    outline: none; 
    border: 0; 
}

Quindi questo è solo per il vostro arco, si potrebbe ottenere più specifiche su altre voci se volessi rimuoverlo altrove.

fonte

2015-06-22 14:11:20 ajmajmajma

Non è lo stato attivo. Controlla il plnkr che ho fornito nella domanda e provalo. –

@RusPaul è lo stato attivo, devi solo rimuoverlo da qualunque elemento tu voglia, ho solo l'esempio della a. Se stai usando chrome, apri gli strumenti di sviluppo, vai al tag elements e ispeziona il tuo file (o quello su cui hai il ng-click su) e fai clic con il tasto destro e forza lo stato dell'elemento su: focus. – ajmajmajma

Vedi questo plnkr: http://plnkr.co/edit/60u8Ur?p=preview .Non funziona. –

questo può essere facile:

aggiungere nofocus classe che gli elementi,

e aggiungere css a quella classe su :focus

.nofocus:focus { 
    outline: none; 
}

fonte

2017-03-29 04:52:53 bhv

Ho affrontato lo stesso problema con la maggior parte degli elementi.

Nel mio caso seguenti codici CSS lavorato:

*:focus { 
    outline: none !important; 
    border: 0 !important; 
}

fonte

2018-02-13 07:02:16

Elemento di bordo strano con ng-clic di materiale angolare

risposta

Problemi correlati