概述
ng-switch可以设置一个开关量，控制子元素显示情况。ng-switch需要和另外两个指令：ng-switch-default和ng-switch-when。
实现细节
| 指令 | 说明 |
|---|---|
| ng-switch | 开关指令，可以绑定开关变量，可以配置在ng-switch属性或者on属性上 |
| ng-switch-default | 默认指令，当开关量没有匹配时，default指令生效 |
| ng-switch-when | 匹配指令，可以关联多个值，每一个值用分隔符分隔，由ng-switch-when-separator指定 |
ng-switch实现
在ng-switch指令中会监测ng-switch或者on属性绑定的数据，优先使用ng-switch属性。 ng-switch指令会维护一个map，在这个map中会存放每一个case对应的transclude列表。如果ng-switch的值在map中找到对应的case，就会使用case中存放的transclude列表进行转换，如果没有找到，就会使用默认的case。
if ((selectedTranscludes = ngSwitchController.cases['!' + value] || ngSwitchController.cases['?'])) {
forEach(selectedTranscludes, function(selectedTransclude) {
selectedTransclude.transclude(function(caseElement, selectedScope) {
selectedScopes.push(selectedScope);
var anchor = selectedTransclude.element;
caseElement[caseElement.length++] = $compile.$$createComment('end ngSwitchWhen');
var block = { clone: caseElement };
selectedElements.push(block);
$animate.enter(caseElement, anchor.parent(), anchor);
});
});
}
ng-switch-default实现
default指令会把元素的transclude添加到默认列表中去。
link: function(scope, element, attr, ctrl, $transclude) {
ctrl.cases['?'] = (ctrl.cases['?'] || []);
ctrl.cases['?'].push({ transclude: $transclude, element: element });
}
ng-switch-when实现
when指令会把元素的transclude添加到绑定的数据值对应的列表中去。
link: function(scope, element, attrs, ctrl, $transclude) {
var cases = attrs.ngSwitchWhen.split(attrs.ngSwitchWhenSeparator).sort().filter(
// Filter duplicate cases
function(element, index, array) { return array[index - 1] !== element; }
);
forEach(cases, function(whenCase) {
ctrl.cases['!' + whenCase] = (ctrl.cases['!' + whenCase] || []);
ctrl.cases['!' + whenCase].push({ transclude: $transclude, element: element });
});
}
从代码可以看出，这个指令主要会进行两个工作：
1、根据ng-switch-when-separator属性指定的分隔符分隔ng-switch-when的属性，并且去除重复数据。
2、循环遍历，把自己的transclude添加到对应的case中去。
样例代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body>
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings|options" ng-switch-when-separator="|">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
<input ng-model="selection">
</div>
</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) {
$scope.items = ['settings', 'home', 'options', 'other'];
$scope.selection = $scope.items[0];
}]);
</script>
</html>
这段代码实现了在输入框中输入['settings','home','options','other']等值，上方显示不同的div。
网友评论