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

Source: Internet
Author: User


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.