Elaborate on Angular ng-class to make the controller more pure

In the previous experiences of Angularjs development, we mentioned that in angular development, angular controller never contains DOM elements html/css). In the controller, a simple POJOplain object javascript object is required ), fully isolated from the view to interact with the angularjs framework. However, in some projects, the most common element involved in the controller DOM is to define a variable on the controller scope. Its value is class name, as shown in the following figure:

Function ctr ($ scope ){

$ Scope. test = "classname ";

}

<Div class = "{test }}"> </div>

This method is completely correct. angular provides a way to change the class, but it is always so strange to me that the controller involves classname, what I want is that controller is a clean and pure javascript object.

In angular, we provide three solutions for class processing:

1: bind the scope variable, as shown in the preceding example. Not recommended)

2: String Array format.

3: Object key/value processing.

We continue with the following two solutions:

1. The String Array form is a simple change to the class, with exclusive changes, true is what class, false is what class, and its shape is like;

Function Ctr ($ scope ){

$ Scope. isActive = true;

}

<Div ng-class = "{true: 'active', false: 'inactive'} [isActive]">

</Div>

The result is a combination in 2. If the isActive expression is true, it is active and inactive.

2. Object key/value processing mainly targets complex class mixing, which is like:

Function Ctr ($ scope ){

}

<Div ng-class {'selected': isSelected, 'cart': isCar} ">

</Div>

When isSelected = true, the selected class is added,

When isCar = true, the car class is added,

Therefore, you may have four combinations.

We recommend using two or three methods. We do not recommend that you put the class on the controller scope. The scope must be pure. The scope can only be data and behavior.

This article from the "wolf" blog, please be sure to keep this source http://whitewolfblog.blog.51cto.com/3973901/1206484