essa-platform / es-ng-antd

Commit 6fcf6aec262df4ffc2f6bdb60212f6955506b373

Authored by Imshann
1 parent 2c0a9da3

feat(popover): 优化组件

Showing 6 changed files with 270 additions and 251 deletions   Show diff stats
Inline Side-by-side
build/Common/Common.js
  Show/Hide comments   View file @6fcf6ae
... ... @@ -59,5 +59,18 @@ angular.module("esNgAntd").service("esNgAntd", [
59 59 document.body.appendChild(div);
60 60 $compile(div)(scope);
61 61 };
  62 +
  63 + this.getOffset = function (ele) {
  64 + if (!ele || ele.nodeType != 1) {
  65 + return;
  66 + }
  67 +
  68 + let rect = ele.getBoundingClientRect();
  69 + let doc = ele.ownerDocument.documentElement;
  70 + return {
  71 + top: rect.top + window.pageYOffset - doc.clientTop,
  72 + left: rect.left + window.pageXOffset - doc.clientLeft,
  73 + };
  74 + };
62 75 },
63 76 ]);
... ...
build/Popover/Popover.js
  Show/Hide comments   View file @6fcf6ae
1 1 import template from "./Popover.html";
2   -angular.module("esNgAntd").directive("esPopover", function ($compile) {
3   - return {
4   - controllerAs: "esPopover",
5   - restrict: "E",
6   - transclude: true,
7   - replace: true,
8   - scope: {
9   - title: "@",
10   - content: "@",
11   - context: "=",
12   - placement: "@",
13   - getPopupContainer: "&",
14   - },
15   - template: template,
16   - controller: function ($scope, $element) {
17   - this.getContext = function () {
18   - return $scope;
19   - };
20   -
21   - $scope.state = {
22   - visible: false,
23   - content: $scope.content ? $scope.content : "",
24   - clickTarget: null,
25   - };
26   -
27   - $scope.myEvent = function () {
28   - setTimeout(() => {
29   - $scope.state.visible = false;
30   - $scope.$apply();
31   - document.body.removeEventListener("click", $scope.myEvent);
32   - }, 0);
33   - };
34   -
35   - $scope.handleClick = function () {
36   - if ($scope.state.visible === false) {
37   - // 气泡层（显示）
38   - $scope.state.visible = true; // j
39   -
40   - $scope.handlePosition(); // 事件绑定
41   -
42   - document.body.addEventListener("click", $scope.myEvent);
43   - } else {
  2 +import style from "antd/lib/popover/style/index.css";
  3 +angular
  4 + .module("esNgAntd")
  5 + .directive("esPopover", function ($compile, esNgAntd) {
  6 + return {
  7 + controllerAs: "esPopover",
  8 + restrict: "E",
  9 + transclude: true,
  10 + replace: true,
  11 + scope: {
  12 + title: "@",
  13 + content: "@",
  14 + context: "=",
  15 + placement: "@",
  16 + getPopupContainer: "&",
  17 + },
  18 + template: template,
  19 + controller: function ($scope, $element, $attrs) {
  20 + this.getContext = function () {
  21 + return $scope;
  22 + };
  23 +
  24 + $scope.state = {
  25 + visible: false,
  26 + content: $scope.content ? $scope.content : "",
  27 + clickTarget: null,
  28 + };
  29 +
  30 + $scope.myEvent = function () {
44 31 setTimeout(() => {
45 32 $scope.state.visible = false;
46 33 $scope.$apply();
... ... @@ -49,126 +36,142 @@ angular.module("esNgAntd").directive("esPopover", function ($compile) {
49 36 $scope.myEvent
50 37 );
51 38 }, 0);
52   - }
53   - };
  39 + };
  40 +
  41 + $scope.handleClick = function () {
  42 + if ($scope.state.visible === false) {
  43 + // 气泡层（显示）
  44 + $scope.state.visible = true; // 处理位置
  45 +
  46 + $scope.handlePosition(); // 事件绑定
  47 +
  48 + document.body.addEventListener("click", $scope.myEvent);
  49 + } else {
  50 + setTimeout(() => {
  51 + $scope.state.visible = false;
  52 + $scope.$apply();
  53 + document.body.removeEventListener(
  54 + "click",
  55 + $scope.myEvent
  56 + );
  57 + }, 0);
  58 + }
  59 + };
54 60  
55   - $scope.showPopover = function () {
56   - let popover = $scope.state.popover;
57   - popover.classList.remove("ant-popover-hidden");
58   - };
  61 + $scope.handlePosition = function () {
  62 + setTimeout(function () {
  63 + let popover =
  64 + $scope.state.popover.querySelector(".ant-popover");
59 65  
60   - $scope.handlePosition = function () {
61   - setTimeout(function () {
62   - let popover =
63   - $scope.state.popover.querySelector(".ant-popover");
64   -
65   - if ($scope.placement === "top") {
66   - popover.style["top"] = $scope.getTop();
67   - } else if ($scope.placement === "bottom") {
68   - popover.style["top"] = $scope.getTop();
69   - }
  66 + if ($scope.placement === "top") {
  67 + popover.style["top"] = $scope.getTop();
  68 + } else if ($scope.placement === "bottom") {
  69 + popover.style["top"] = $scope.getTop();
  70 + }
70 71  
71   - popover.style.left = $scope.getLeft() + "px";
72   - }, 0);
73   - };
  72 + popover.style.left = $scope.getLeft() + "px";
  73 + }, 0);
  74 + };
74 75  
75   - $scope.getLeft = function () {
76   - let parent = $scope.getPopupContainer();
77   - let popover =
78   - $scope.state.popover.querySelector(".ant-popover");
79   - let target = $scope.state.target;
  76 + $scope.getLeft = function () {
  77 + let parent = $scope.getPopupContainer();
  78 + let popover =
  79 + $scope.state.popover.querySelector(".ant-popover");
  80 + let target = $scope.state.target;
80 81  
81   - if (parent) {
82   - return -(popover.clientWidth / 2 - target.clientWidth / 2);
83   - } else {
84   - return (
85   - $(target).offset().left -
86   - (popover.clientWidth / 2 - target.clientWidth / 2)
87   - );
88   - }
89   - };
90   -
91   - $scope.getTop = function () {
92   - let parent = $scope.getPopupContainer();
93   - let popover =
94   - $scope.state.popover.querySelector(".ant-popover");
95   - let target = $scope.state.target;
96   -
97   - if (parent) {
98   - if ($scope.placement === "top") {
99   - return -popover.clientHeight + "px";
100   - } else if ($scope.placement === "bottom") {
101   - }
102   - } else {
103   - if ($scope.placement === "top") {
104   - return (
105   - $(target).offset().top -
106   - popover.clientHeight -
107   - 4 +
108   - "px"
  82 + if (parent) {
  83 + return -(
  84 + popover.clientWidth / 2 -
  85 + target.clientWidth / 2
109 86 );
110   - } else if ($scope.placement === "bottom") {
  87 + } else {
  88 + let offset = esNgAntd.getOffset(target);
111 89 return (
112   - $(target).offset().top +
113   - target.clientHeight +
114   - 4 +
115   - "px"
  90 + offset.left -
  91 + (popover.clientWidth / 2 - target.clientWidth / 2)
116 92 );
117 93 }
118   - }
119   - };
120   - },
121   - link: function ($scope, $element, $attrs, $controllers, $transclude) {
122   - $scope.state.target = $element[0];
123   - let title = $scope.title
124   - ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>`
125   - : "";
126   - let content = `<div>
127   - <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${
128   - $scope.placement
129   - }'+(!state.visible?' ant-popover-hidden': '')">
  94 + };
  95 +
  96 + $scope.getTop = function () {
  97 + let parent = $scope.getPopupContainer();
  98 + let popover =
  99 + $scope.state.popover.querySelector(".ant-popover");
  100 + let target = $scope.state.target;
  101 +
  102 + if (parent) {
  103 + if ($scope.placement === "top") {
  104 + return -popover.clientHeight + "px";
  105 + } else if ($scope.placement === "bottom") {
  106 + }
  107 + } else {
  108 + let offset = esNgAntd.getOffset(target);
  109 +
  110 + if ($scope.placement === "top") {
  111 + return offset.top - popover.clientHeight - 4 + "px";
  112 + } else if ($scope.placement === "bottom") {
  113 + return offset.top + target.clientHeight + 4 + "px";
  114 + }
  115 + }
  116 + };
  117 + },
  118 + link: function (
  119 + $scope,
  120 + $element,
  121 + $attrs,
  122 + $controllers,
  123 + $transclude
  124 + ) {
  125 + esNgAntd.createStyle("ant-popover", style);
  126 + $scope.state.target = $element[0];
  127 + let title = $scope.title
  128 + ? `<div class="ant-popover-title"><span>${$scope.title}</span></div>`
  129 + : "";
  130 + let content = `<div>
  131 + <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')">
130 132 <div class="ant-popover-content">
131   - <div class="ant-popover-arrow"></div>
  133 + <div class="ant-popover-arrow">
  134 + <span class="ant-popover-arrow-content"></span>
  135 + </div>
132 136 <div class="ant-popover-inner">
133 137 <div>
134 138 ${title}
135   - <div class="ant-popover-inner-content">
136   - ${$scope.state.content.replace(
137   - /\$scope/g,
138   - "context"
139   - )}
140   - </div>
  139 + <div class="ant-popover-inner-content"></div>
141 140 </div>
142 141 </div>
143 142 </div>
144 143 </div>
145 144 </div>`;
146   - let div = document.createElement("div");
147   -
148   - if (typeof $scope.getPopupContainer() === "function") {
149   - $scope.state.popupContainer = $scope.getPopupContainer()();
150   - }
151   -
152   - if (!$scope.state.popupContainer) {
153   - div.style.position = "absolute";
154   - div.style.top = "0px";
155   - div.style.left = "0px";
156   - div.style.width = "100%";
157   - div.innerHTML = content;
158   - document.body.appendChild(div);
159   - } else {
160   - div.innerHTML = content;
161   - $scope.state.popupContainer.appendChild(div);
162   - }
163   -
164   - div.addEventListener("click", function (event) {
165   - event.stopPropagation();
166   - });
167   - $scope.state.target.addEventListener("click", (e) => {
168   - e.stopPropagation();
169   - });
170   - $compile(div)($scope);
171   - $scope.state.popover = div;
172   - },
173   - };
174   -});
  145 + let div = document.createElement("div");
  146 +
  147 + if (typeof $scope.getPopupContainer() === "function") {
  148 + $scope.state.popupContainer = $scope.getPopupContainer()();
  149 + }
  150 +
  151 + if (!$scope.state.popupContainer) {
  152 + div.style.position = "absolute";
  153 + div.style.top = "0px";
  154 + div.style.left = "0px";
  155 + div.style.width = "100%";
  156 + div.innerHTML = content;
  157 + document.body.appendChild(div);
  158 + } else {
  159 + $scope.state.popupContainer.appendChild(div);
  160 + }
  161 +
  162 + div.addEventListener("click", function (event) {
  163 + event.stopPropagation();
  164 + });
  165 + $scope.state.target.addEventListener("click", (e) => {
  166 + e.stopPropagation();
  167 + });
  168 + $compile(div)($scope);
  169 + div.querySelector(".ant-popover-inner-content").innerHTML =
  170 + $scope.state.content;
  171 + $compile(div.querySelector(".ant-popover-inner-content"))(
  172 + $scope.$parent
  173 + );
  174 + $scope.state.popover = div;
  175 + },
  176 + };
  177 + });
... ...
dist/ng-antd.js
  Show/Hide comments   View file @6fcf6ae
... ... @@ -104,7 +104,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Col
104 104 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
105 105  
106 106 "use strict";
107   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1\n ) {\n rule.selectorText = rule.selectorText.replace(\n /\\.ant\\-/g,\n \".disabled-ant-\"\n );\n console.log(rule.selectorText);\n }\n }\n };\n\n this.conflict = function (filename) {\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?");
  107 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/style/index.css */ \"./node_modules/antd/lib/style/index.css\");\n\nangular.module(\"esNgAntd\").service(\"esNgAntd\", [\n \"$compile\",\n function ($compile) {\n this.styleSheets = null;\n\n this.createStyle = function (key, style) {\n if (!document.querySelector(\"#antd\")) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", \"antd\");\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = antd_lib_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"].toString();\n document.head.appendChild(styleElement);\n }\n\n if (!document.querySelector(\"#\" + key)) {\n let styleElement = document.createElement(\"style\");\n styleElement.setAttribute(\"id\", key);\n styleElement.setAttribute(\"type\", \"text/css\");\n styleElement.innerHTML = style.toString();\n document.head.appendChild(styleElement);\n\n if (this.styleSheets) {\n this.disableStyle(key);\n }\n }\n };\n\n this.disableStyle = function (name) {\n for (let i = 0; i < this.styleSheets.cssRules.length; i++) {\n let rule = this.styleSheets.cssRules[i];\n\n if (\n rule.selectorText &&\n rule.selectorText.indexOf(name) !== -1\n ) {\n rule.selectorText = rule.selectorText.replace(\n /\\.ant\\-/g,\n \".disabled-ant-\"\n );\n console.log(rule.selectorText);\n }\n }\n };\n\n this.conflict = function (filename) {\n for (let i = 0; i < document.styleSheets.length; i++) {\n const element = document.styleSheets[i];\n\n if (element.href && element.href.indexOf(filename) !== -1) {\n this.styleSheets = element;\n }\n }\n };\n\n this.createLayer = function (content, scope) {\n let div = document.createElement(\"div\");\n div.innerHTML = content;\n document.body.appendChild(div);\n $compile(div)(scope);\n };\n\n this.getOffset = function (ele) {\n if (!ele || ele.nodeType != 1) {\n return;\n }\n\n let rect = ele.getBoundingClientRect();\n let doc = ele.ownerDocument.documentElement;\n return {\n top: rect.top + window.pageYOffset - doc.clientTop,\n left: rect.left + window.pageXOffset - doc.clientLeft,\n };\n };\n },\n]);\n\n\n//# sourceURL=webpack://ng-antd/./build/Common/Common.js?");
108 108  
109 109 /***/ }),
110 110  
... ... @@ -291,7 +291,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Pag
291 291 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
292 292  
293 293 "use strict";
294   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Popover_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Popover.html */ \"./build/Popover/Popover.html\");\n\nangular.module(\"esNgAntd\").directive(\"esPopover\", function ($compile) {\n return {\n controllerAs: \"esPopover\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n content: \"@\",\n context: \"=\",\n placement: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Popover_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n visible: false,\n content: $scope.content ? $scope.content : \"\",\n clickTarget: null,\n };\n\n $scope.myEvent = function () {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\"click\", $scope.myEvent);\n }, 0);\n };\n\n $scope.handleClick = function () {\n if ($scope.state.visible === false) {\n // 气泡层（显示）\n $scope.state.visible = true; // j\n\n $scope.handlePosition(); // 事件绑定\n\n document.body.addEventListener(\"click\", $scope.myEvent);\n } else {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n }\n };\n\n $scope.showPopover = function () {\n let popover = $scope.state.popover;\n popover.classList.remove(\"ant-popover-hidden\");\n };\n\n $scope.handlePosition = function () {\n setTimeout(function () {\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n\n if ($scope.placement === \"top\") {\n popover.style[\"top\"] = $scope.getTop();\n } else if ($scope.placement === \"bottom\") {\n popover.style[\"top\"] = $scope.getTop();\n }\n\n popover.style.left = $scope.getLeft() + \"px\";\n }, 0);\n };\n\n $scope.getLeft = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n return -(popover.clientWidth / 2 - target.clientWidth / 2);\n } else {\n return (\n $(target).offset().left -\n (popover.clientWidth / 2 - target.clientWidth / 2)\n );\n }\n };\n\n $scope.getTop = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n if ($scope.placement === \"top\") {\n return -popover.clientHeight + \"px\";\n } else if ($scope.placement === \"bottom\") {\n }\n } else {\n if ($scope.placement === \"top\") {\n return (\n $(target).offset().top -\n popover.clientHeight -\n 4 +\n \"px\"\n );\n } else if ($scope.placement === \"bottom\") {\n return (\n $(target).offset().top +\n target.clientHeight +\n 4 +\n \"px\"\n );\n }\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n $scope.state.target = $element[0];\n let title = $scope.title\n ? `<div class=\"ant-popover-title\"><span>${$scope.title}</span></div>`\n : \"\";\n let content = `<div>\n <div style=\"outline:none\" ng-class=\"'ant-popover ant-popover-placement-${\n $scope.placement\n }'+(!state.visible?' ant-popover-hidden': '')\">\n <div class=\"ant-popover-content\">\n <div class=\"ant-popover-arrow\"></div>\n <div class=\"ant-popover-inner\">\n <div>\n ${title}\n <div class=\"ant-popover-inner-content\">\n ${$scope.state.content.replace(\n /\\$scope/g,\n \"context\"\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>`;\n let div = document.createElement(\"div\");\n\n if (typeof $scope.getPopupContainer() === \"function\") {\n $scope.state.popupContainer = $scope.getPopupContainer()();\n }\n\n if (!$scope.state.popupContainer) {\n div.style.position = \"absolute\";\n div.style.top = \"0px\";\n div.style.left = \"0px\";\n div.style.width = \"100%\";\n div.innerHTML = content;\n document.body.appendChild(div);\n } else {\n div.innerHTML = content;\n $scope.state.popupContainer.appendChild(div);\n }\n\n div.addEventListener(\"click\", function (event) {\n event.stopPropagation();\n });\n $scope.state.target.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n });\n $compile(div)($scope);\n $scope.state.popover = div;\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.js?");
  294 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Popover_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Popover.html */ \"./build/Popover/Popover.html\");\n/* harmony import */ var antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/popover/style/index.css */ \"./node_modules/antd/lib/popover/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"esPopover\", function ($compile, esNgAntd) {\n return {\n controllerAs: \"esPopover\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n title: \"@\",\n content: \"@\",\n context: \"=\",\n placement: \"@\",\n getPopupContainer: \"&\",\n },\n template: _Popover_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n visible: false,\n content: $scope.content ? $scope.content : \"\",\n clickTarget: null,\n };\n\n $scope.myEvent = function () {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n };\n\n $scope.handleClick = function () {\n if ($scope.state.visible === false) {\n // 气泡层（显示）\n $scope.state.visible = true; // 处理位置\n\n $scope.handlePosition(); // 事件绑定\n\n document.body.addEventListener(\"click\", $scope.myEvent);\n } else {\n setTimeout(() => {\n $scope.state.visible = false;\n $scope.$apply();\n document.body.removeEventListener(\n \"click\",\n $scope.myEvent\n );\n }, 0);\n }\n };\n\n $scope.handlePosition = function () {\n setTimeout(function () {\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n\n if ($scope.placement === \"top\") {\n popover.style[\"top\"] = $scope.getTop();\n } else if ($scope.placement === \"bottom\") {\n popover.style[\"top\"] = $scope.getTop();\n }\n\n popover.style.left = $scope.getLeft() + \"px\";\n }, 0);\n };\n\n $scope.getLeft = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n return -(\n popover.clientWidth / 2 -\n target.clientWidth / 2\n );\n } else {\n let offset = esNgAntd.getOffset(target);\n return (\n offset.left -\n (popover.clientWidth / 2 - target.clientWidth / 2)\n );\n }\n };\n\n $scope.getTop = function () {\n let parent = $scope.getPopupContainer();\n let popover =\n $scope.state.popover.querySelector(\".ant-popover\");\n let target = $scope.state.target;\n\n if (parent) {\n if ($scope.placement === \"top\") {\n return -popover.clientHeight + \"px\";\n } else if ($scope.placement === \"bottom\") {\n }\n } else {\n let offset = esNgAntd.getOffset(target);\n\n if ($scope.placement === \"top\") {\n return offset.top - popover.clientHeight - 4 + \"px\";\n } else if ($scope.placement === \"bottom\") {\n return offset.top + target.clientHeight + 4 + \"px\";\n }\n }\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n esNgAntd.createStyle(\"ant-popover\", antd_lib_popover_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n $scope.state.target = $element[0];\n let title = $scope.title\n ? `<div class=\"ant-popover-title\"><span>${$scope.title}</span></div>`\n : \"\";\n let content = `<div>\n <div style=\"outline:none\" ng-class=\"'ant-popover ant-popover-placement-${$scope.placement}'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')\">\n <div class=\"ant-popover-content\">\n <div class=\"ant-popover-arrow\">\n <span class=\"ant-popover-arrow-content\"></span>\n </div>\n <div class=\"ant-popover-inner\">\n <div>\n ${title}\n <div class=\"ant-popover-inner-content\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>`;\n let div = document.createElement(\"div\");\n\n if (typeof $scope.getPopupContainer() === \"function\") {\n $scope.state.popupContainer = $scope.getPopupContainer()();\n }\n\n if (!$scope.state.popupContainer) {\n div.style.position = \"absolute\";\n div.style.top = \"0px\";\n div.style.left = \"0px\";\n div.style.width = \"100%\";\n div.innerHTML = content;\n document.body.appendChild(div);\n } else {\n $scope.state.popupContainer.appendChild(div);\n }\n\n div.addEventListener(\"click\", function (event) {\n event.stopPropagation();\n });\n $scope.state.target.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n });\n $compile(div)($scope);\n div.querySelector(\".ant-popover-inner-content\").innerHTML =\n $scope.state.content;\n $compile(div.querySelector(\".ant-popover-inner-content\"))(\n $scope.$parent\n );\n $scope.state.popover = div;\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Popover/Popover.js?");
295 295  
296 296 /***/ }),
297 297  
... ... @@ -9302,6 +9302,17 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
9302 9302  
9303 9303 /***/ }),
9304 9304  
  9305 +/***/ "./node_modules/antd/lib/popover/style/index.css":
  9306 +/*!*******************************************************!*\
  9307 + !*** ./node_modules/antd/lib/popover/style/index.css ***!
  9308 + \*******************************************************/
  9309 +/***/ ((module, __webpack_exports__, __webpack_require__) => {
  9310 +
  9311 +"use strict";
  9312 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\\n/* stylelint-disable no-duplicate-selectors */\\n/* stylelint-disable */\\n/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */\\n.ant-popover {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n color: rgba(0, 0, 0, 0.85);\\n font-size: 14px;\\n font-variant: tabular-nums;\\n line-height: 1.5715;\\n list-style: none;\\n font-feature-settings: 'tnum';\\n position: absolute;\\n top: 0;\\n left: 0;\\n z-index: 1030;\\n font-weight: normal;\\n white-space: normal;\\n text-align: left;\\n cursor: auto;\\n -webkit-user-select: text;\\n -moz-user-select: text;\\n -ms-user-select: text;\\n user-select: text;\\n}\\n.ant-popover::after {\\n position: absolute;\\n background: rgba(255, 255, 255, 0.01);\\n content: '';\\n}\\n.ant-popover-hidden {\\n display: none;\\n}\\n.ant-popover-placement-top,\\n.ant-popover-placement-topLeft,\\n.ant-popover-placement-topRight {\\n padding-bottom: 10px;\\n}\\n.ant-popover-placement-right,\\n.ant-popover-placement-rightTop,\\n.ant-popover-placement-rightBottom {\\n padding-left: 10px;\\n}\\n.ant-popover-placement-bottom,\\n.ant-popover-placement-bottomLeft,\\n.ant-popover-placement-bottomRight {\\n padding-top: 10px;\\n}\\n.ant-popover-placement-left,\\n.ant-popover-placement-leftTop,\\n.ant-popover-placement-leftBottom {\\n padding-right: 10px;\\n}\\n.ant-popover-inner {\\n background-color: #fff;\\n background-clip: padding-box;\\n border-radius: 2px;\\n box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \\\\9;\\n}\\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\\n .ant-popover {\\n /* IE10+ */\\n }\\n .ant-popover-inner {\\n box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\\n }\\n}\\n.ant-popover-title {\\n min-width: 177px;\\n min-height: 32px;\\n margin: 0;\\n padding: 5px 16px 4px;\\n color: rgba(0, 0, 0, 0.85);\\n font-weight: 500;\\n border-bottom: 1px solid #f0f0f0;\\n}\\n.ant-popover-inner-content {\\n padding: 12px 16px;\\n color: rgba(0, 0, 0, 0.85);\\n}\\n.ant-popover-message {\\n position: relative;\\n padding: 4px 0 12px;\\n color: rgba(0, 0, 0, 0.85);\\n font-size: 14px;\\n}\\n.ant-popover-message > .anticon {\\n position: absolute;\\n top: 8.0005px;\\n color: #faad14;\\n font-size: 14px;\\n}\\n.ant-popover-message-title {\\n padding-left: 22px;\\n}\\n.ant-popover-buttons {\\n margin-bottom: 4px;\\n text-align: right;\\n}\\n.ant-popover-buttons button {\\n margin-left: 8px;\\n}\\n.ant-popover-arrow {\\n position: absolute;\\n display: block;\\n width: 8.48528137px;\\n height: 8.48528137px;\\n overflow: hidden;\\n background: transparent;\\n pointer-events: none;\\n}\\n.ant-popover-arrow-content {\\n position: absolute;\\n top: 0;\\n right: 0;\\n bottom: 0;\\n left: 0;\\n display: block;\\n width: 6px;\\n height: 6px;\\n margin: auto;\\n background-color: #fff;\\n content: '';\\n pointer-events: auto;\\n}\\n.ant-popover-placement-top .ant-popover-arrow,\\n.ant-popover-placement-topLeft .ant-popover-arrow,\\n.ant-popover-placement-topRight .ant-popover-arrow {\\n bottom: 1.51471863px;\\n}\\n.ant-popover-placement-top .ant-popover-arrow-content,\\n.ant-popover-placement-topLeft .ant-popover-arrow-content,\\n.ant-popover-placement-topRight .ant-popover-arrow-content {\\n box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);\\n transform: translateY(-4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-top .ant-popover-arrow {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n.ant-popover-placement-topLeft .ant-popover-arrow {\\n left: 16px;\\n}\\n.ant-popover-placement-topRight .ant-popover-arrow {\\n right: 16px;\\n}\\n.ant-popover-placement-right .ant-popover-arrow,\\n.ant-popover-placement-rightTop .ant-popover-arrow,\\n.ant-popover-placement-rightBottom .ant-popover-arrow {\\n left: 1.51471863px;\\n}\\n.ant-popover-placement-right .ant-popover-arrow-content,\\n.ant-popover-placement-rightTop .ant-popover-arrow-content,\\n.ant-popover-placement-rightBottom .ant-popover-arrow-content {\\n box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);\\n transform: translateX(4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-right .ant-popover-arrow {\\n top: 50%;\\n transform: translateY(-50%);\\n}\\n.ant-popover-placement-rightTop .ant-popover-arrow {\\n top: 12px;\\n}\\n.ant-popover-placement-rightBottom .ant-popover-arrow {\\n bottom: 12px;\\n}\\n.ant-popover-placement-bottom .ant-popover-arrow,\\n.ant-popover-placement-bottomLeft .ant-popover-arrow,\\n.ant-popover-placement-bottomRight .ant-popover-arrow {\\n top: 1.51471863px;\\n}\\n.ant-popover-placement-bottom .ant-popover-arrow-content,\\n.ant-popover-placement-bottomLeft .ant-popover-arrow-content,\\n.ant-popover-placement-bottomRight .ant-popover-arrow-content {\\n box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);\\n transform: translateY(4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-bottom .ant-popover-arrow {\\n left: 50%;\\n transform: translateX(-50%);\\n}\\n.ant-popover-placement-bottomLeft .ant-popover-arrow {\\n left: 16px;\\n}\\n.ant-popover-placement-bottomRight .ant-popover-arrow {\\n right: 16px;\\n}\\n.ant-popover-placement-left .ant-popover-arrow,\\n.ant-popover-placement-leftTop .ant-popover-arrow,\\n.ant-popover-placement-leftBottom .ant-popover-arrow {\\n right: 1.51471863px;\\n}\\n.ant-popover-placement-left .ant-popover-arrow-content,\\n.ant-popover-placement-leftTop .ant-popover-arrow-content,\\n.ant-popover-placement-leftBottom .ant-popover-arrow-content {\\n box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);\\n transform: translateX(-4.24264069px) rotate(45deg);\\n}\\n.ant-popover-placement-left .ant-popover-arrow {\\n top: 50%;\\n transform: translateY(-50%);\\n}\\n.ant-popover-placement-leftTop .ant-popover-arrow {\\n top: 12px;\\n}\\n.ant-popover-placement-leftBottom .ant-popover-arrow {\\n bottom: 12px;\\n}\\n.ant-popover-pink .ant-popover-inner {\\n background-color: #eb2f96;\\n}\\n.ant-popover-pink .ant-popover-arrow-content {\\n background-color: #eb2f96;\\n}\\n.ant-popover-magenta .ant-popover-inner {\\n background-color: #eb2f96;\\n}\\n.ant-popover-magenta .ant-popover-arrow-content {\\n background-color: #eb2f96;\\n}\\n.ant-popover-red .ant-popover-inner {\\n background-color: #f5222d;\\n}\\n.ant-popover-red .ant-popover-arrow-content {\\n background-color: #f5222d;\\n}\\n.ant-popover-volcano .ant-popover-inner {\\n background-color: #fa541c;\\n}\\n.ant-popover-volcano .ant-popover-arrow-content {\\n background-color: #fa541c;\\n}\\n.ant-popover-orange .ant-popover-inner {\\n background-color: #fa8c16;\\n}\\n.ant-popover-orange .ant-popover-arrow-content {\\n background-color: #fa8c16;\\n}\\n.ant-popover-yellow .ant-popover-inner {\\n background-color: #fadb14;\\n}\\n.ant-popover-yellow .ant-popover-arrow-content {\\n background-color: #fadb14;\\n}\\n.ant-popover-gold .ant-popover-inner {\\n background-color: #faad14;\\n}\\n.ant-popover-gold .ant-popover-arrow-content {\\n background-color: #faad14;\\n}\\n.ant-popover-cyan .ant-popover-inner {\\n background-color: #13c2c2;\\n}\\n.ant-popover-cyan .ant-popover-arrow-content {\\n background-color: #13c2c2;\\n}\\n.ant-popover-lime .ant-popover-inner {\\n background-color: #a0d911;\\n}\\n.ant-popover-lime .ant-popover-arrow-content {\\n background-color: #a0d911;\\n}\\n.ant-popover-green .ant-popover-inner {\\n background-color: #52c41a;\\n}\\n.ant-popover-green .ant-popover-arrow-content {\\n background-color: #52c41a;\\n}\\n.ant-popover-blue .ant-popover-inner {\\n background-color: #1890ff;\\n}\\n.ant-popover-blue .ant-popover-arrow-content {\\n background-color: #1890ff;\\n}\\n.ant-popover-geekblue .ant-popover-inner {\\n background-color: #2f54eb;\\n}\\n.ant-popover-geekblue .ant-popover-arrow-content {\\n background-color: #2f54eb;\\n}\\n.ant-popover-purple .ant-popover-inner {\\n background-color: #722ed1;\\n}\\n.ant-popover-purple .ant-popover-arrow-content {\\n background-color: #722ed1;\\n}\\n.ant-popover-rtl {\\n direction: rtl;\\n text-align: right;\\n}\\n.ant-popover-rtl .ant-popover-message-title {\\n padding-right: 22px;\\n padding-left: 16px;\\n}\\n.ant-popover-rtl .ant-popover-buttons {\\n text-align: left;\\n}\\n.ant-popover-rtl .ant-popover-buttons button {\\n margin-right: 8px;\\n margin-left: 0;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://ng-antd/./node_modules/antd/lib/popover/style/index.css?");
  9313 +
  9314 +/***/ }),
  9315 +
9305 9316 /***/ "./node_modules/antd/lib/radio/style/index.css":
9306 9317 /*!*****************************************************!*\
9307 9318 !*** ./node_modules/antd/lib/radio/style/index.css ***!
... ...
example/popover.html
  Show/Hide comments   View file @6fcf6ae
... ... @@ -4,59 +4,36 @@
4 4 <head>
5 5 <meta charset="UTF-8" />
6 6 <title></title>
7   - <link href="https://cdn.staticfile.org/antd/3.26.9/antd.css" rel="stylesheet" />
8   - <style>
9   -
10   - </style>
11 7 </head>
12 8  
13 9 <body>
14   - <div ng-app="essa" ng-controller="mainCtrl">
  10 + <div ng-app="esNgAntd" ng-controller="mainCtrl">
15 11 <div class="container" style="margin: 200px">
16   - <es-popover placement="bottom" content="{{content}}" context="context">
17   - <button>Hover me</button>
  12 + <es-popover placement="bottom" content="{{content}}" title="Title">
  13 + <es-button>Hover me</es-button>
18 14 </es-popover>
19   - <es-popover placement="top" content="{{content}}" context="context">
  15 + <!-- <es-popover placement="top" content="{{content}}" context="context">
20 16 <button>Top</button>
21 17 </es-popover>
22 18 <es-popover style="position: fixed; left: 200px; top: 200px" placement="top" content="{{content}}" context="context" get-popup-container="handlePopupContainer" id="test">
23 19 <button>Fixed</button>
24   - </es-popover>
  20 + </es-popover> -->
25 21 </div>
26 22 </div>
27 23 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
28   - <script src="https://cdn.staticfile.org/jquery/3.3.0/jquery.min.js"></script>
  24 + <script src="../dist/ng-antd.js"></script>
29 25 <script>
30 26 angular
31   - .module("essa", [])
  27 + .module("esNgAntd")
32 28 .controller("mainCtrl", function ($scope) {
33   - $scope.context = $scope;
34   - $scope.dataSource = [{
35   - id: 1,
36   - name: "aaa"
37   - },
38   - {
39   - id: 2,
40   - name: "bbb"
41   - }]
42   - $scope.handleAbc = function() {
43   - alert(123123);
44   - }
45   - $scope.renderItem = function (item) {
46   - return `<es-list-item>
47   - <span>${item.name}</span>
48   - <button ng-click="$scope.handleAbc()">Link</button>
49   - </es-list-item>`;
50   - }
51   - $scope.content = `<es-list d-source="$scope.dataSource" render-item="$scope.renderItem(item)" context="context"></es-list>`;
52   - // $scope.content = `<button ng-click="handleAbc()">1324123</button>`;
  29 +
  30 + $scope.content = `<div><p>Content</p><p>Content</p></div>`;
53 31  
54   - $scope.handlePopupContainer = function() {
55   - return document.querySelector("#test");
  32 + $scope.handleClick = function () {
  33 + alert("I am click");
56 34 }
57 35 });
58 36 </script>
59   - <script src="../dist/ng-antd.bundle.js"></script>
60 37 </body>
61 38  
62 39 </html>
63 40 \ No newline at end of file
... ...
src/Common/Common.js
  Show/Hide comments   View file @6fcf6ae
1 1 import baseStyle from "antd/lib/style/index.css";
2 2  
3   -angular.module("esNgAntd").service("esNgAntd", ["$compile", function ($compile) {
4   - this.styleSheets = null;
  3 +angular.module("esNgAntd").service("esNgAntd", [
  4 + "$compile",
  5 + function ($compile) {
  6 + this.styleSheets = null;
5 7  
6   - this.createStyle = function (key, style) {
7   - if (!document.querySelector("#antd")) {
8   - let styleElement = document.createElement("style");
9   - styleElement.setAttribute("id", "antd");
10   - styleElement.setAttribute("type", "text/css");
11   - styleElement.innerHTML = baseStyle.toString();
12   - document.head.appendChild(styleElement);
13   - }
14   - if (!document.querySelector("#" + key)) {
15   - let styleElement = document.createElement("style");
16   - styleElement.setAttribute("id", key);
17   - styleElement.setAttribute("type", "text/css");
18   - styleElement.innerHTML = style.toString();
19   - document.head.appendChild(styleElement);
20   - if (this.styleSheets) {
21   - this.disableStyle(key);
  8 + this.createStyle = function (key, style) {
  9 + if (!document.querySelector("#antd")) {
  10 + let styleElement = document.createElement("style");
  11 + styleElement.setAttribute("id", "antd");
  12 + styleElement.setAttribute("type", "text/css");
  13 + styleElement.innerHTML = baseStyle.toString();
  14 + document.head.appendChild(styleElement);
22 15 }
23   - }
24   - };
  16 + if (!document.querySelector("#" + key)) {
  17 + let styleElement = document.createElement("style");
  18 + styleElement.setAttribute("id", key);
  19 + styleElement.setAttribute("type", "text/css");
  20 + styleElement.innerHTML = style.toString();
  21 + document.head.appendChild(styleElement);
  22 + if (this.styleSheets) {
  23 + this.disableStyle(key);
  24 + }
  25 + }
  26 + };
25 27  
26   - this.disableStyle = function (name) {
27   - for (let i = 0; i < this.styleSheets.cssRules.length; i++) {
28   - let rule = this.styleSheets.cssRules[i];
29   - if (rule.selectorText && rule.selectorText.indexOf(name) !== -1) {
30   - rule.selectorText = rule.selectorText.replace(
31   - /\.ant\-/g,
32   - ".disabled-ant-"
33   - );
34   - console.log(rule.selectorText);
  28 + this.disableStyle = function (name) {
  29 + for (let i = 0; i < this.styleSheets.cssRules.length; i++) {
  30 + let rule = this.styleSheets.cssRules[i];
  31 + if (
  32 + rule.selectorText &&
  33 + rule.selectorText.indexOf(name) !== -1
  34 + ) {
  35 + rule.selectorText = rule.selectorText.replace(
  36 + /\.ant\-/g,
  37 + ".disabled-ant-"
  38 + );
  39 + console.log(rule.selectorText);
  40 + }
35 41 }
36   - }
37   - };
  42 + };
38 43  
39   - this.conflict = function (filename) {
40   - for (let i = 0; i < document.styleSheets.length; i++) {
41   - const element = document.styleSheets[i];
42   - if (element.href && element.href.indexOf(filename) !== -1) {
43   - this.styleSheets = element;
  44 + this.conflict = function (filename) {
  45 + for (let i = 0; i < document.styleSheets.length; i++) {
  46 + const element = document.styleSheets[i];
  47 + if (element.href && element.href.indexOf(filename) !== -1) {
  48 + this.styleSheets = element;
  49 + }
44 50 }
45   - }
46   - };
  51 + };
  52 +
  53 + this.createLayer = function (content, scope) {
  54 + let div = document.createElement("div");
  55 + div.innerHTML = content;
  56 + document.body.appendChild(div);
  57 + $compile(div)(scope);
  58 + };
47 59  
48   - this.createLayer = function (content, scope) {
49   - let div = document.createElement("div");
50   - div.innerHTML = content;
51   - document.body.appendChild(div);
52   - $compile(div)(scope);
53   - };
54   -}]);
  60 + this.getOffset = function (ele) {
  61 + if (!ele || ele.nodeType != 1) {
  62 + return;
  63 + }
  64 + let rect = ele.getBoundingClientRect();
  65 + let doc = ele.ownerDocument.documentElement;
  66 + return {
  67 + top: rect.top + window.pageYOffset - doc.clientTop,
  68 + left: rect.left + window.pageXOffset - doc.clientLeft,
  69 + };
  70 + };
  71 + },
  72 +]);
... ...
src/Popover/Popover.js
  Show/Hide comments   View file @6fcf6ae
1 1 import template from "./Popover.html";
  2 +import style from "antd/lib/popover/style/index.css";
2 3  
3 4 class Popover {
  5 +
  6 + template = template;
  7 +
  8 + useModules = ["$compile", "esNgAntd"];
  9 +
4 10 props = {
5 11 title: String,
6 12 content: String,
... ... @@ -15,11 +21,8 @@ class Popover {
15 21 clickTarget: null,
16 22 };
17 23  
18   - template = template;
19   -
20   - useModules = ["$compile"];
21   -
22 24 constructor() {
  25 + esNgAntd.createStyle("ant-popover", style);
23 26 this.state.target = $element[0];
24 27 let title = this.props.title
25 28 ? `<div class="ant-popover-title"><span>${this.props.title}</span></div>`
... ... @@ -27,18 +30,15 @@ class Popover {
27 30 let content = `<div>
28 31 <div style="outline:none" ng-class="'ant-popover ant-popover-placement-${
29 32 this.props.placement
30   - }'+(!state.visible?' ant-popover-hidden': '')">
  33 + }'+(!state.visible?' ant-popover-hidden': '')+(state.visible?' ant-zoom-big-enter ant-zoom-big-enter-active': '')">
31 34 <div class="ant-popover-content">
32   - <div class="ant-popover-arrow"></div>
  35 + <div class="ant-popover-arrow">
  36 + <span class="ant-popover-arrow-content"></span>
  37 + </div>
33 38 <div class="ant-popover-inner">
34 39 <div>
35 40 ${title}
36   - <div class="ant-popover-inner-content">
37   - ${this.state.content.replace(
38   - /\$scope/g,
39   - "context"
40   - )}
41   - </div>
  41 + <div class="ant-popover-inner-content"></div>
42 42 </div>
43 43 </div>
44 44 </div>
... ... @@ -56,7 +56,6 @@ class Popover {
56 56 div.innerHTML = content;
57 57 document.body.appendChild(div);
58 58 } else {
59   - div.innerHTML = content;
60 59 this.state.popupContainer.appendChild(div);
61 60 }
62 61 div.addEventListener("click", function (event) {
... ... @@ -66,6 +65,8 @@ class Popover {
66 65 e.stopPropagation();
67 66 });
68 67 $compile(div)($scope);
  68 + div.querySelector(".ant-popover-inner-content").innerHTML = this.state.content;
  69 + $compile(div.querySelector(".ant-popover-inner-content"))($scope.$parent)
69 70 this.state.popover = div;
70 71 }
71 72  
... ... @@ -81,7 +82,7 @@ class Popover {
81 82 if (this.state.visible === false) {
82 83 // 气泡层（显示）
83 84 this.state.visible = true;
84   - // j
  85 + // 处理位置
85 86 this.handlePosition();
86 87 // 事件绑定
87 88 document.body.addEventListener("click", this.myEvent);
... ... @@ -94,11 +95,6 @@ class Popover {
94 95 }
95 96 }
96 97  
97   - showPopover() {
98   - let popover = this.state.popover;
99   - popover.classList.remove("ant-popover-hidden");
100   - }
101   -
102 98 handlePosition() {
103 99 setTimeout(function () {
104 100 let popover = this.state.popover.querySelector(".ant-popover");
... ... @@ -118,9 +114,9 @@ class Popover {
118 114 if (parent) {
119 115 return -(popover.clientWidth / 2 - target.clientWidth / 2);
120 116 } else {
  117 + let offset = esNgAntd.getOffset(target);
121 118 return (
122   - $(target).offset().left -
123   - (popover.clientWidth / 2 - target.clientWidth / 2)
  119 + offset.left - (popover.clientWidth / 2 - target.clientWidth / 2)
124 120 );
125 121 }
126 122 }
... ... @@ -135,10 +131,11 @@ class Popover {
135 131 } else if (this.props.placement === "bottom") {
136 132 }
137 133 } else {
  134 + let offset = esNgAntd.getOffset(target);
138 135 if (this.props.placement === "top") {
139   - return $(target).offset().top - popover.clientHeight - 4 + "px";
  136 + return offset.top - popover.clientHeight - 4 + "px";
140 137 } else if (this.props.placement === "bottom") {
141   - return $(target).offset().top + target.clientHeight + 4 + "px";
  138 + return offset.top + target.clientHeight + 4 + "px";
142 139 }
143 140 }
144 141 }
... ...