Изменение CSS от AngularJS

Question

Изменения DOM от контроллеров angularjs не являются хорошей практикой. В моем приложении после нажатия ссылки я меняю класс элемента html внутри ngView. предполагаемое поведение заключается в том, что у меня есть три div, и я меняю, если средний показан или нет. Я делаю это с контроллера. Я читал, что выполнение манипуляций с DOM должно выполняться в директиве, но мой разум недостаточно широк, чтобы найти решение. Пожалуйста, если у вас есть предложение, я буду рад.

Answer 1

Использование ng-class.

например:

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(); 
     }); 
    }; 
}); 

Некоторые HTML:

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

При нажатии на кнопку, класс центра DIV будет меняться в зависимости от boolen значения, установленного в вашей объем.