angular指令插件1

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');                //在作用域没绑定前，修改DOM                forEach({                    '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;    }})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63