Aktualisierung dom aus Javascript innerhalb angularjs

Question

Ich ändere die Klasse einer Schaltfläche, einer Schaltfläche Gruppe, mit Javascript innerhalb der eckigen Direktive.

Mein Update ist korrekt. Aber die Änderung spiegelt sich nicht auf dem Bildschirm wider, bis ich irgendwo auf der Seite klicke.

angular.module('test', []). 
directive('selected', function() { 
    return { 
    link: selectedLinker, 
    restrict: 'A', 
    replace: false 
    } 

    function selectedLinker(scope, element, attribute) { 
    var groupname = attribute.selected; 
    groupname = 'groupname'; 
    element.bind('click', function() { 
     var elements = document.querySelectorAll('[selected=' + groupname + ']'); 
     for(var i=0; i<elements.length; i++) { 
     var item = elements[i]; 
     item.classList.remove('selected'); 
     } 
     this.classList.add('selected'); 
     //element.addClass('selected'); 
    }) 
    } 
}); 

Was bin ich hier fehlt. Ich möchte nicht jquery verwenden. Vielen Dank.

Pluker Link

Answer 1

versuchen, dies zu Ihrem CSS hinzufügen:

.btn:focus { 
     background-color: inherit !important; 
     color: inherit !important; 
    } 

Answer 2

hinzufügen this.blur() nach this.classList.add('selected'); in Link-Funktion Ihrer Richtlinie ist die Bootstrap-CSS-Eigenschaften aufgrund der Taste im Fokus sein werden klar angewandt.