js代码

/*** @ngdoc directive* @name myToggle* @module index* @restrict E*/
(function () {'use strict';var jqLite = angular.element,forEach = angular.forEach;angular.module('index.directive', []).directive('myToggle', IndexDirective);//function IndexDirective() {var obj = {restrict: 'E',replace: true,require: '?ngModel',transclude: true,template: '<div class="item item-toggle">' +'<div ng-transclude></div>' +'<label class="toggle">' +'<input type="checkbox">' +'<div class="track">' +'<div class="handle"></div>' +'</div>' +'</label>' +'</div>',compile: function (element, attr) {var input = element.find('input');//在作用域没绑定前，修改DOMforEach({'ng-model': attr.ngModel}, function (value, name) {input.attr(name, value);});return function ($scope, $ele) {var checkbox = $ele[0].getElementsByTagName('input')[0];//获得多选框元素的指定控制器实例var ngModelController = jqLite(checkbox).controller('ngModel');//监听多选框的事件jqLite(checkbox).on('change', checkbox_change);if ($scope.user.open) {checkbox.checked = true;} else {checkbox.checked = false;}function checkbox_change() {//当触发多选框事件时，改变变量if (ngModelController) {ngModelController.$setViewValue(checkbox.checked);$scope.$apply();}}};}};return obj;}
})();

css代码

        .toggle {position: relative;display: inline-block;pointer-events: auto;margin: -5px;padding: 5px; }.toggle input:checked + .track {border-color: #4cd964;background-color: #4cd964; }.toggle input {display: none; }.toggle .track {-webkit-transition-timing-function: ease-in-out;transition-timing-function: ease-in-out;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: background-color, border;transition-property: background-color, border;display: inline-block;box-sizing: border-box;width: 51px;height: 31px;border: solid 2px #e6e6e6;border-radius: 20px;background-color: #fff;content: ' ';cursor: pointer;pointer-events: none; }.toggle .handle:before {position: absolute;top: -4px;left: -21.5px;padding: 18.5px 34px;content: " "; }.toggle input:checked + .track .handle {-webkit-transform: translate3d(20px, 0, 0);transform: translate3d(20px, 0, 0);background-color: #fff; }.item-toggle .toggle {position: absolute;top: 10px;right: 16px;z-index: 3; }.toggle input:disabled + .track {opacity: 0.6; }.toggle .handle {-webkit-transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1);transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1);-webkit-transition-property: background-color, transform;transition-property: background-color, transform;position: absolute;display: block;width: 27px;height: 27px;border-radius: 27px;background-color: #fff;top: 7px;left: 7px;box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15); }</style>