Select.js
4.39 KB
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import template from "./Select.html";
angular.module("esNgAntd").directive("esSelect", function ($compile, $timeout) {
return {
controllerAs: "esSelect",
restrict: "E",
transclude: true,
replace: true,
scope: {
value: "@",
placeholder: "@",
onChange: "&",
placeholder: "@",
getPopupContainer: "&",
},
template: template,
controller: function ($scope, $element) {
this.getContext = function () {
return $scope;
};
$scope.state = {
open: false,
childrens: [],
label: null,
value: null,
popup: null,
};
$scope.addOption = function (option) {
$scope.state.childrens.push(option);
};
$scope.handleClick = function (option) {
$scope.state.open = !$scope.state.open;
$scope.state.label = option.label;
$scope.state.value = option.value;
$scope.onChange({
value: $scope.state.value,
});
};
$scope.getOffset = function (ele) {
if (!ele || ele.nodeType != 1) {
return;
}
let func = $scope.getPopupContainer();
if (typeof func === "function" && func() !== undefined) {
return {
top: $element[0].offsetTop,
left: $element[0].offsetLeft,
};
} else {
let rect = ele.getBoundingClientRect();
let doc = ele.ownerDocument.documentElement;
return {
top: rect.top + window.pageYOffset - doc.clientTop,
left: rect.left + window.pageXOffset - doc.clientLeft,
};
}
};
$scope.myEvent = function () {
$timeout(() => {
$scope.state.open = false;
document.body.removeEventListener("click", $scope.myEvent);
}, 0);
};
$scope.handleBlur = function () {
// 事件绑定
document.body.addEventListener("click", $scope.myEvent);
};
$scope.handleOpen = function (event) {
event.stopPropagation();
const { height, width } = $element[0].getBoundingClientRect();
const { top, left } = $scope.getOffset($element[0]);
let div = document.createElement("div");
div.style.position = "absolute";
div.style.left = 0;
div.style.top = 0;
div.style.width = "100%";
div.appendChild(
$compile(`<div><div ng-class="'ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')" style="width: ${width}px; left: ${left}px; top: ${
top + height + 2
}px;">
<ul class="ant-select-dropdown-menu ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical">
<li class="ant-select-dropdown-menu-item" ng-click="handleClick(option)" ng-repeat="option in state.childrens">{{option.label}}</li>
</ul>
</div></div>`)($scope)[0]
);
if ($scope.state.popup === null) {
let func = $scope.getPopupContainer();
if (typeof func === "function" && func() !== undefined) {
$element[0].style.position = "relative";
$scope.getPopupContainer()().appendChild(div);
} else {
document.body.appendChild(div);
}
$scope.state.popup = div;
}
$scope.state.open = !$scope.state.open;
$scope.handleBlur();
};
},
link: function ($scope, $element, $attrs, $controllers, $transclude) {
let option = $scope.state.childrens.find(function (option) {
return option.value === $scope.value;
});
$scope.state.label = option.label;
},
};
});