ng-switch指令

2016-09-11 本文已影响0人 yb_剑笙

概述

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。