概述
ng-class指令实现了把元素的class属性和数据模型绑定的功能。在进行样式动态控制时非常的有用。
ng-class指令实际上有三种。分别为：
| 指令名称 | 指令说明 |
|---|---|
| ng-class | 在任何元素中都可以使用 |
| ng-class-odd | 配合ng-repeat指令使用，$index为偶数时生效 |
| ng-class-even | 配合ng-repeat指令使用，$index为奇数时生效 |
实现细节
三种指令实现上几乎是一模一样的，ng-class-odd和ng-class-even多了一个对$index数据的监控。
核心代码：
响应数据变化
function ngClassWatchAction(newVal) {
// eslint-disable-next-line no-bitwise
if (selector === true || (scope.$index & 1) === selector) {
var newClasses = arrayClasses(newVal || []);
if (!oldVal) {
addClasses(newClasses);
} else if (!equals(newVal,oldVal)) {
var oldClasses = arrayClasses(oldVal);
updateClasses(oldClasses, newClasses);
}
}
if (isArray(newVal)) {
oldVal = newVal.map(function(v) { return shallowCopy(v); });
} else {
oldVal = shallowCopy(newVal);
}
}
这个函数是在监控到ng-class(ng-class-odd或ng-class-even)的值发生变化时调用的。在这个函数中主要进行了三个事情：
1、根据新值获取到需要添加的class名称列表。
2、添加或者更新class列表。
3、保存当前的ng-class的值备用。
其中第一步和第二步是核心。
获取需要添加的class列表
function arrayClasses(classVal) {
var classes = [];
if (isArray(classVal)) {
forEach(classVal, function(v) {
classes = classes.concat(arrayClasses(v));
});
return classes;
} else if (isString(classVal)) {
return classVal.split(' ');
} else if (isObject(classVal)) {
forEach(classVal, function(v, k) {
if (v) {
classes = classes.concat(k.split(' '));
}
});
return classes;
}
return classVal;
}
从代码可以看出，ng-class的值支持三种形式：
| 类型 | 说明 |
|---|---|
| Array | 每一个元素可以为string，Array，Object |
| string | 多个class以空格分隔，每一个class会被直接加入class列表 |
| Object | 会遍历Object的属性，只有属性为true的才会被添加到class列表 |
添加class
当绑定的数据从无变化为有数据的时候会直接调用添加class的方法，代码为：
function removeClasses(classes) {
var newClasses = digestClassCounts(classes, -1);
attr.$removeClass(newClasses);
}
这个方法比较简单，只有一个digestClassCounts方法需要注意，在后面会详细说明。
更新class
当绑定的数据从一个值变化到令一个值的时候，就会调用更新class的方法，这个过程只会修改变动的class，其它class不会修改。
function updateClasses(oldClasses, newClasses) {
var toAdd = arrayDifference(newClasses, oldClasses);
var toRemove = arrayDifference(oldClasses, newClasses);
toAdd = digestClassCounts(toAdd, 1);
toRemove = digestClassCounts(toRemove, -1);
if (toAdd && toAdd.length) {
$animate.addClass(element, toAdd);
}
if (toRemove && toRemove.length) {
$animate.removeClass(element, toRemove);
}
}
这个方法主要干的事情有：
1、获取需要添加和需要删除的class。
2、去除重复的class。
3、添加需要添加的class，删除需要删除的class。
arrayDifference方法主要是计算出第一个参数相对与第二个参数多出来的Array元素，内部为循环遍历，比较简单。
class去除重复
在实际使用的过程中，很有可能会出现多个绑定的数据的值是一样的，导致得到的class列表里面会有重复的值，这个时候为了提高效率，就需要提前去除重复的数据。digestClassCounts方法就是起到了这个作用。
function digestClassCounts(classes, count) {
// Use createMap() to prevent class assumptions involving property
// names in Object.prototype
var classCounts = element.data('$classCounts') || createMap();
var classesToUpdate = [];
forEach(classes, function(className) {
if (count > 0 || classCounts[className]) {
classCounts[className] = (classCounts[className] || 0) + count;
if (classCounts[className] === +(count > 0)) {
classesToUpdate.push(className);
}
}
});
element.data('$classCounts', classCounts);
return classesToUpdate.join(' ');
}
添加class时参数count就等于1，删除class时count就等于-1。通过遍历以及之前缓存的每一个class的次数来判断是否需要添加到最终的class列表。
ng-class-odd和ng-class-even特有的处理过程
if (name !== 'ngClass') {
scope.$watch('$index', function($index, old$index) {
/* eslint-disable no-bitwise */
var mod = $index & 1;
if (mod !== (old$index & 1)) {
var classes = arrayClasses(scope.$eval(attr[name]));
if (mod === selector) {
addClasses(classes);
} else {
removeClasses(classes);
}
}
/* eslint-enable */
});
}
从代码可以看出，对于ng-class-odd和ng-class-even会去监测$index数据，$index数据是ng-repeat的一个默认数据，所以这两个指令更多是配合ng-repeat使用，当然理论是自己控制$index的值来使用这个两个指令也是可以的。
样例代码
ng-class的样例代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
<style>
.strike {
text-decoration: line-through;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
.has-error {
color: red;
background-color: yellow;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
<label>
<input type="checkbox" ng-model="deleted">
deleted (apply "strike" class)
</label><br>
<label>
<input type="checkbox" ng-model="important">
important (apply "bold" class)
</label><br>
<label>
<input type="checkbox" ng-model="error">
error (apply "has-error" class)
</label>
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style"
placeholder="Type: bold strike red" aria-label="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1"
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br>
<input ng-model="style2"
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br>
<input ng-model="style3"
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br>
<hr>
<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
<input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>
</body>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script src="./node_modules/angular-sanitize/angular-sanitize.js" type="text/javascript"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope', function ($scope) {
}]);
</script>
</html>
在这段代码中实现了使用ng-class来控制元素样式的工程，ng-class多种绑定方式都有。
ng-class-odd和ng-class-even样例代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
<style>
.odd {
color: red;
}
.even {
color: blue;
}
</style>
</head>
<body>
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
</ol>
</body>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script src="./node_modules/angular-sanitize/angular-sanitize.js" type="text/javascript"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope', function ($scope) {
}]);
</script>
</html>
这段代码实现了ng-class-odd和ng-class-even与ng-repeat配合使用，控制奇偶行显示不同样式的功能。
网友评论