Modifica CSS da AngularJS

Question

Le modifiche DOM dai controller angularjs non sono una buona pratica. Nella mia applicazione, dopo aver cliccato su un link, sto cambiando la classe di un elemento html all'interno di ngView. il comportamento previsto è che ho tre div e sto cambiando se viene mostrato o meno quello centrale. Lo sto facendo da un controller. Ho letto che fare una manipolazione DOM dovrebbe essere fatto in una direttiva, ma la mia mente non è abbastanza ampia da trovare una soluzione. Per favore, se hai un suggerimento, sarò felice.

Answer 1

Utilizzare ng-class.

esempio:

http://jsfiddle.net/rd13/eTTZj/75/

app = angular.module('myApp', []); 

app.directive("click", function() { 
    return function(scope, element, attrs) { 
     element.bind("click", function() { 
      scope.boolChangeClass = !scope.boolChangeClass; 
      scope.$apply(); 
     }); 
    }; 
}); 

Alcuni HTML:

<div id="page"> 
    <div>One</div> 
    <div ng-class="{'my-class':boolChangeClass}">Two</div> 
    <div>Three</div> 
    <button click>Click me</button> 
</div> 

Quando si fa clic sul pulsante, la classe del centro div cambierà a seconda del valore boolen impostato all'interno del tuo scopo.