essa-platform / es-ng-antd

Commit 9dc592c0c4f4a5ca03ffa9eca8d9a5ec8e2eca41

Authored by Imshann
1 parent 2e253299

升级Image和ImagePreviewGroup到新版本

Showing 12 changed files with 227 additions and 229 deletions   Show diff stats
Inline Side-by-side
build/Image/Image.html
  Show/Hide comments   View file @9dc592c
1 1 <div class="ant-image" ng-style="{width:width+'px',height:height+'px'}">
2 2 <img class="ant-image-img" ng-style="{width:'100%',height:height+'px'}" ng-src="{{state.src}}" />
3   - <div ng-if="preview!=='false'&&state.hasImage" class="ant-image-mask" ng-click="handleOpen()">
  3 + <div ng-if="preview!==false&&state.hasImage" class="ant-image-mask" ng-click="handleOpen()">
4 4 <div class="ant-image-mask-info">
5 5 <span class="anticon anticon-eye">预览</span>
6 6 </div>
... ...
build/Image/Image.js
  Show/Hide comments   View file @9dc592c
1 1 import template from "./Image.html";
2 2 import style from "antd/lib/image/style/index.css";
3   -angular
4   - .module("esNgAntd")
5   - .directive("antdImage", function ($timeout, esNgAntd, $compile) {
6   - return {
7   - controllerAs: "antdImage",
8   - restrict: "E",
9   - transclude: true,
10   - replace: true,
11   - scope: {
12   - src: "@",
13   - dSrc: "@",
14   - width: "@",
15   - height: "@",
16   - preview: "@",
17   - },
18   - template: template,
19   - controller: function ($scope, $element, $attrs) {
20   - this.getContext = function () {
21   - return $scope;
22   - };
  3 +angular.module("esNgAntd").directive("antdImage", ["$timeout", "esNgAntd", "$compile", function ($timeout, esNgAntd, $compile) {
  4 + return {
  5 + template: template,
  6 + restrict: "E",
  7 + replace: true,
  8 + transclude: true,
  9 + scope: {
  10 + src: "@",
  11 + dSrc: "@",
  12 + width: "=",
  13 + height: "=",
  14 + preview: "="
  15 + },
  16 + require: ["^?antdImagePreviewGroup"],
  17 + controller: function ($scope, $element) {
  18 + $scope.watch = {
  19 + dSrc: function (newVal) {
  20 + if (!["undefined", undefined, null, ""].includes(newVal)) {
  21 + $scope.state.hasImage = true;
  22 + $scope.state.src = newVal;
  23 + }
  24 + }
  25 + };
  26 + $scope.state = {
  27 + src: "data:image/png;base64,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",
  28 + // 可见性
  29 + visible: false,
  30 + // 有图片？
  31 + hasImage: false,
  32 + // 索引
  33 + index: null
  34 + };
23 35  
24   - $scope.state = {
25   - src: "data:image/png;base64,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",
26   - // 可见性
27   - visible: false,
28   - // 有图片？
29   - hasImage: false,
30   - // 索引
31   - index: null,
32   - };
33   - $scope.watch = {
34   - dSrc: function (newVal) {
35   - if (
36   - !["undefined", undefined, null, ""].includes(newVal)
37   - ) {
38   - $scope.state.hasImage = true;
39   - $scope.state.src = newVal;
40   - }
41   - },
42   - };
  36 + $scope.handleOpen = function () {
  37 + if ($scope.antdImagePreviewGroup) {
  38 + $scope.antdImagePreviewGroup.handleOpen($scope.state.index);
  39 + return;
  40 + }
43 41  
44   - for (const key in $scope.watch) {
45   - $scope.$watch(key, $scope.watch[key], true);
46   - }
  42 + $scope.state.visible = true;
  43 + };
47 44  
48   - $scope.handleOpen = function () {
49   - if ($scope.antdImagePreviewGroup) {
50   - $scope.antdImagePreviewGroup.handleOpen(
51   - $scope.state.index
52   - );
53   - return;
54   - }
  45 + $scope.handleClose = function () {
  46 + $scope.state.visible = false;
  47 + };
55 48  
56   - $scope.state.visible = true;
57   - };
58   -
59   - $scope.handleClose = function () {
60   - $scope.state.visible = false;
61   - };
62   -
63   - $scope.handlePreview = function () {
64   - let div = document.createElement("div");
65   - div.innerHTML = `
  49 + $scope.handlePreview = function () {
  50 + let div = document.createElement("div");
  51 + div.innerHTML = `
66 52 <div class="ant-image-preview-root">
67 53 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
68 54 <div class="ant-image-preview-wrap" ng-show="state.visible">
... ... @@ -85,37 +71,37 @@ angular
85 71 </div>
86 72 </div>
87 73 `;
88   - document.body.appendChild(div);
89   - $compile(div)($scope);
90   - };
91   - },
92   - require: ["?^antdImagePreviewGroup"],
93   - link: function (
94   - $scope,
95   - $element,
96   - $attrs,
97   - $controllers,
98   - $transclude
99   - ) {
100   - let [antdImagePreviewGroup] = $controllers;
101   - esNgAntd.createStyle("ant-image", style);
102   - let src = $scope.state.src;
  74 + document.body.appendChild(div);
  75 + $compile(div)($scope);
  76 + };
  77 + },
  78 + link: function ($scope, $element, $attrs, $controllers) {
  79 + for (const key in $scope.watch) {
  80 + $scope.$watch(key, $scope.watch[key], true);
  81 + }
  82 +
  83 + [$element, $attrs, $controllers].forEach(function (value, key) {
  84 + if ([undefined, null, ""].includes(value)) {
  85 + throw new Error(`${["$element", "$attrs", "$controllers"][key]} parameter of constructor method is required.`);
  86 + }
  87 + });
  88 + esNgAntd.createStyle("ant-image", style);
  89 + let src = $scope.state.src;
  90 + let [antdImagePreviewGroup] = $controllers;
103 91  
104   - $element.children("img")[0].onerror = function () {
105   - $timeout(function () {
106   - $scope.state.hasImage = false;
107   - $scope.state.src = src;
108   - }, 0);
109   - };
  92 + $element.children("img")[0].onerror = function () {
  93 + $timeout(function () {
  94 + $scope.state.hasImage = false;
  95 + $scope.state.src = src;
  96 + }, 0);
  97 + };
110 98  
111   - if (antdImagePreviewGroup) {
112   - $scope.antdImagePreviewGroup =
113   - antdImagePreviewGroup.getContext();
114   - $scope.state.index =
115   - $scope.antdImagePreviewGroup.addChildren($scope);
116   - } else {
117   - $scope.handlePreview();
118   - }
119   - },
120   - };
121   - });
  99 + if (antdImagePreviewGroup) {
  100 + $scope.antdImagePreviewGroup = antdImagePreviewGroup.getContext();
  101 + $scope.state.index = $scope.antdImagePreviewGroup.addChildren($scope);
  102 + } else {
  103 + $scope.handlePreview();
  104 + }
  105 + }
  106 + };
  107 +}]);
122 108 \ No newline at end of file
... ...
build/ImagePreviewGroup/ImagePreviewGroup.js
  Show/Hide comments   View file @9dc592c
1 1 import template from "./ImagePreviewGroup.html";
2   -angular
3   - .module("esNgAntd")
4   - .directive("antdImagePreviewGroup", function (esNgAntd) {
5   - return {
6   - controllerAs: "antdImagePreviewGroup",
7   - restrict: "E",
8   - transclude: true,
9   - replace: true,
10   - scope: {
11   - preview: "=",
12   - },
13   - template: template,
14   - controller: function ($scope, $element, $attrs) {
15   - this.getContext = function () {
16   - return $scope;
17   - };
  2 +angular.module("esNgAntd").directive("antdImagePreviewGroup", ["esNgAntd", function (esNgAntd) {
  3 + return {
  4 + template: template,
  5 + restrict: "E",
  6 + replace: true,
  7 + transclude: true,
  8 + scope: {
  9 + preview: "="
  10 + },
  11 + controller: function ($scope, $element, $attrs) {
  12 + $scope.state = {
  13 + current: 0,
  14 + visible: false,
  15 + src: null,
  16 + childrens: []
  17 + };
18 18  
19   - $scope.state = {
20   - current: 0,
21   - visible: false,
22   - src: null,
23   - childrens: [],
24   - };
  19 + $scope.addChildren = function (children) {
  20 + [children].forEach(function (value, key) {
  21 + if ([undefined, null, ""].includes(value)) {
  22 + throw new Error(`${["children"][key]} parameter of addChildren method is required.`);
  23 + }
  24 + });
  25 + $scope.state.childrens.push(children);
  26 + return $scope.state.childrens.length - 1;
  27 + };
25 28  
26   - $scope.addChildren = function (children) {
27   - $scope.state.childrens.push(children);
28   - return $scope.state.childrens.length - 1;
29   - };
  29 + $scope.setCurrent = function (value) {
  30 + [value].forEach(function (value, key) {
  31 + if ([undefined, null, ""].includes(value)) {
  32 + throw new Error(`${["value"][key]} parameter of setCurrent method is required.`);
  33 + }
  34 + });
  35 + $scope.state.current = value;
30 36  
31   - $scope.setCurrent = function (value) {
32   - $scope.state.current = value;
  37 + if (typeof $scope.preview === "object" && typeof $scope.preview.onCurrentChange === "function") {
  38 + $scope.preview.onCurrentChange(value);
  39 + }
  40 + };
33 41  
34   - if (
35   - typeof $scope.preview === "object" &&
36   - typeof $scope.preview.onCurrentChange === "function"
37   - ) {
38   - $scope.preview.onCurrentChange(value);
39   - }
40   - };
  42 + $scope.setVisible = function (value) {
  43 + [value].forEach(function (value, key) {
  44 + if ([undefined, null, ""].includes(value)) {
  45 + throw new Error(`${["value"][key]} parameter of setVisible method is required.`);
  46 + }
  47 + });
  48 + $scope.state.visible = value;
41 49  
42   - $scope.setVisible = function (value) {
43   - $scope.state.visible = value;
  50 + if (typeof $scope.preview === "object" && typeof $scope.preview.onVisibleChange === "function") {
  51 + $scope.preview.onVisibleChange(value);
  52 + }
  53 + };
44 54  
45   - if (
46   - typeof $scope.preview === "object" &&
47   - typeof $scope.preview.onVisibleChange === "function"
48   - ) {
49   - $scope.preview.onVisibleChange(value);
50   - }
51   - };
  55 + $scope.handleOpen = function (index) {
  56 + [index].forEach(function (value, key) {
  57 + if ([undefined, null, ""].includes(value)) {
  58 + throw new Error(`${["index"][key]} parameter of handleOpen method is required.`);
  59 + }
  60 + });
  61 + $scope.setCurrent(index);
  62 + $scope.state.src = $scope.state.childrens[index].state.src;
  63 + $scope.setVisible(true);
  64 + };
52 65  
53   - $scope.handleOpen = function (index) {
54   - $scope.setCurrent(index);
55   - $scope.state.src = $scope.state.childrens[index].state.src;
56   - $scope.setVisible(true);
57   - };
  66 + $scope.handleClose = function () {
  67 + $scope.setVisible(false);
  68 + };
58 69  
59   - $scope.handleClose = function () {
60   - $scope.setVisible(false);
61   - };
  70 + $scope.handlePrev = function () {
  71 + $scope.setCurrent($scope.state.current > 0 ? $scope.state.current - 1 : 0);
  72 + $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;
  73 + };
62 74  
63   - $scope.handlePrev = function () {
64   - $scope.setCurrent(
65   - $scope.state.current > 0 ? $scope.state.current - 1 : 0
66   - );
67   - $scope.state.src =
68   - $scope.state.childrens[$scope.state.current].state.src;
69   - };
  75 + $scope.handleNext = function () {
  76 + $scope.setCurrent($scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 : $scope.state.childrens.length - 1);
  77 + $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;
  78 + };
70 79  
71   - $scope.handleNext = function () {
72   - $scope.setCurrent(
73   - $scope.state.current < $scope.state.childrens.length - 1
74   - ? $scope.state.current + 1
75   - : $scope.state.childrens.length - 1
76   - );
77   - $scope.state.src =
78   - $scope.state.childrens[$scope.state.current].state.src;
79   - };
  80 + $scope.handlePreview = function () {
  81 + let className;
80 82  
81   - $scope.handlePreview = function () {
82   - let className;
  83 + if ($attrs.class) {
  84 + className = ` ${$attrs.class}`;
  85 + }
83 86  
84   - if ($attrs.class) {
85   - className = ` ${$attrs.class}`;
86   - }
87   -
88   - esNgAntd.createLayer(
89   - `
  87 + esNgAntd.createLayer(`
90 88 <div class="ant-image-preview-root${className}">
91 89 <div class="ant-image-preview-mask" ng-if="state.visible"></div>
92 90 <div class="ant-image-preview-wrap" ng-show="state.visible">
... ... @@ -114,19 +112,20 @@ angular
114 112 </div>
115 113 </div>
116 114 </div>
117   - `,
118   - $scope
119   - );
120   - };
121   - },
122   - link: function (
123   - $scope,
124   - $element,
125   - $attrs,
126   - $controllers,
127   - $transclude
128   - ) {
129   - $scope.handlePreview();
130   - },
131   - };
132   - });
  115 + `, $scope);
  116 + };
  117 +
  118 + this.getContext = function () {
  119 + return $scope;
  120 + };
  121 + },
  122 + link: function ($scope, $element, $attrs) {
  123 + [$element, $attrs].forEach(function (value, key) {
  124 + if ([undefined, null, ""].includes(value)) {
  125 + throw new Error(`${["$element", "$attrs"][key]} parameter of constructor method is required.`);
  126 + }
  127 + });
  128 + $scope.handlePreview();
  129 + }
  130 + };
  131 +}]);
133 132 \ No newline at end of file
... ...
dist/ng-antd.js
  Show/Hide comments   View file @9dc592c
... ... @@ -170,7 +170,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ant
170 170 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
171 171  
172 172 "use strict";
173   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Image_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Image.html */ \"./build/Image/Image.html\");\n/* harmony import */ var antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/image/style/index.css */ \"./node_modules/antd/lib/image/style/index.css\");\n\n\nangular\n .module(\"esNgAntd\")\n .directive(\"antdImage\", function ($timeout, esNgAntd, $compile) {\n return {\n controllerAs: \"antdImage\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n src: \"@\",\n dSrc: \"@\",\n width: \"@\",\n height: \"@\",\n preview: \"@\",\n },\n template: _Image_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 src: \"data:image/png;base64,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\",\n // 可见性\n visible: false,\n // 有图片？\n hasImage: false,\n // 索引\n index: null,\n };\n\n $scope.handleOpen = function () {\n if ($scope.antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup.handleOpen(\n $scope.state.index\n );\n return;\n }\n\n $scope.state.visible = true;\n };\n\n $scope.handleClose = function () {\n $scope.state.visible = false;\n };\n\n $scope.handlePreview = function () {\n let div = document.createElement(\"div\");\n div.innerHTML = `\n <div class=\"ant-image-preview-root\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n document.body.appendChild(div);\n $compile(div)($scope);\n };\n },\n require: [\"?^antdImagePreviewGroup\"],\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n let [antdImagePreviewGroup] = $controllers;\n esNgAntd.createStyle(\"ant-image\", antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let src = $scope.state.src;\n\n $element.children(\"img\")[0].onerror = function () {\n $timeout(function () {\n $scope.state.hasImage = false;\n $scope.state.src = src;\n }, 0);\n };\n\n if (\n $scope.dSrc !== \"undefined\" &&\n $scope.dSrc !== undefined &&\n $scope.dSrc !== null &&\n $scope.dSrc !== \"\"\n ) {\n $scope.state.hasImage = true;\n $scope.state.src = $scope.dSrc;\n }\n\n if (antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup =\n antdImagePreviewGroup.getContext();\n $scope.state.index =\n $scope.antdImagePreviewGroup.addChildren($scope);\n } else {\n $scope.handlePreview();\n }\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.js?");
  173 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Image_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Image.html */ \"./build/Image/Image.html\");\n/* harmony import */ var antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/image/style/index.css */ \"./node_modules/antd/lib/image/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdImage\", [\"$timeout\", \"esNgAntd\", \"$compile\", function ($timeout, esNgAntd, $compile) {\n return {\n template: _Image_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n src: \"@\",\n dSrc: \"@\",\n width: \"=\",\n height: \"=\",\n preview: \"=\"\n },\n require: [\"^?antdImagePreviewGroup\"],\n controller: function ($scope, $element) {\n $scope.watch = {\n dSrc: function (newVal) {\n if (![\"undefined\", undefined, null, \"\"].includes(newVal)) {\n $scope.state.hasImage = true;\n $scope.state.src = newVal;\n }\n }\n };\n $scope.state = {\n src: \"data:image/png;base64,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\",\n // 可见性\n visible: false,\n // 有图片？\n hasImage: false,\n // 索引\n index: null\n };\n\n $scope.handleOpen = function () {\n if ($scope.antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup.handleOpen($scope.state.index);\n return;\n }\n\n $scope.state.visible = true;\n };\n\n $scope.handleClose = function () {\n $scope.state.visible = false;\n };\n\n $scope.handlePreview = function () {\n let div = document.createElement(\"div\");\n div.innerHTML = `\n <div class=\"ant-image-preview-root\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n document.body.appendChild(div);\n $compile(div)($scope);\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n\n [$element, $attrs, $controllers].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"$element\", \"$attrs\", \"$controllers\"][key]} parameter of constructor method is required.`);\n }\n });\n esNgAntd.createStyle(\"ant-image\", antd_lib_image_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let src = $scope.state.src;\n let [antdImagePreviewGroup] = $controllers;\n\n $element.children(\"img\")[0].onerror = function () {\n $timeout(function () {\n $scope.state.hasImage = false;\n $scope.state.src = src;\n }, 0);\n };\n\n if (antdImagePreviewGroup) {\n $scope.antdImagePreviewGroup = antdImagePreviewGroup.getContext();\n $scope.state.index = $scope.antdImagePreviewGroup.addChildren($scope);\n } else {\n $scope.handlePreview();\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.js?");
174 174  
175 175 /***/ }),
176 176  
... ... @@ -181,7 +181,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima
181 181 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
182 182  
183 183 "use strict";
184   -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ImagePreviewGroup.html */ \"./build/ImagePreviewGroup/ImagePreviewGroup.html\");\n\nangular\n .module(\"esNgAntd\")\n .directive(\"antdImagePreviewGroup\", function (esNgAntd) {\n return {\n controllerAs: \"antdImagePreviewGroup\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n preview: \"=\",\n },\n template: _ImagePreviewGroup_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 current: 0,\n visible: false,\n src: null,\n childrens: [],\n };\n\n $scope.addChildren = function (children) {\n $scope.state.childrens.push(children);\n return $scope.state.childrens.length - 1;\n };\n\n $scope.setCurrent = function (value) {\n $scope.state.current = value;\n\n if (\n typeof $scope.preview === \"object\" &&\n typeof $scope.preview.onCurrentChange === \"function\"\n ) {\n $scope.preview.onCurrentChange(value);\n }\n };\n\n $scope.setVisible = function (value) {\n $scope.state.visible = value;\n\n if (\n typeof $scope.preview === \"object\" &&\n typeof $scope.preview.onVisibleChange === \"function\"\n ) {\n $scope.preview.onVisibleChange(value);\n }\n };\n\n $scope.handleOpen = function (index) {\n $scope.setCurrent(index);\n $scope.state.src = $scope.state.childrens[index].state.src;\n $scope.setVisible(true);\n };\n\n $scope.handleClose = function () {\n $scope.setVisible(false);\n };\n\n $scope.handlePrev = function () {\n $scope.setCurrent(\n $scope.state.current > 0 ? $scope.state.current - 1 : 0\n );\n $scope.state.src =\n $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handleNext = function () {\n $scope.setCurrent(\n $scope.state.current < $scope.state.childrens.length - 1\n ? $scope.state.current + 1\n : $scope.state.childrens.length - 1\n );\n $scope.state.src =\n $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handlePreview = function () {\n let className;\n\n if ($attrs.class) {\n className = ` ${$attrs.class}`;\n }\n\n esNgAntd.createLayer(\n `\n <div class=\"ant-image-preview-root${className}\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}\" ng-click=\"handlePrev()\">\n <antd-icon type=\"LeftOutlined\"></antd-icon>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}\" ng-click=\"handleNext()\">\n <antd-icon type=\"RightOutlined\"></antd-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `,\n $scope\n );\n };\n },\n link: function (\n $scope,\n $element,\n $attrs,\n $controllers,\n $transclude\n ) {\n $scope.handlePreview();\n },\n };\n });\n\n\n//# sourceURL=webpack://ng-antd/./build/ImagePreviewGroup/ImagePreviewGroup.js?");
  184 +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ImagePreviewGroup.html */ \"./build/ImagePreviewGroup/ImagePreviewGroup.html\");\n\nangular.module(\"esNgAntd\").directive(\"antdImagePreviewGroup\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _ImagePreviewGroup_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n preview: \"=\"\n },\n controller: function ($scope, $element, $attrs) {\n $scope.state = {\n current: 0,\n visible: false,\n src: null,\n childrens: []\n };\n\n $scope.addChildren = function (children) {\n [children].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"children\"][key]} parameter of addChildren method is required.`);\n }\n });\n $scope.state.childrens.push(children);\n return $scope.state.childrens.length - 1;\n };\n\n $scope.setCurrent = function (value) {\n [value].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"value\"][key]} parameter of setCurrent method is required.`);\n }\n });\n $scope.state.current = value;\n\n if (typeof $scope.preview === \"object\" && typeof $scope.preview.onCurrentChange === \"function\") {\n $scope.preview.onCurrentChange(value);\n }\n };\n\n $scope.setVisible = function (value) {\n [value].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"value\"][key]} parameter of setVisible method is required.`);\n }\n });\n $scope.state.visible = value;\n\n if (typeof $scope.preview === \"object\" && typeof $scope.preview.onVisibleChange === \"function\") {\n $scope.preview.onVisibleChange(value);\n }\n };\n\n $scope.handleOpen = function (index) {\n [index].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"index\"][key]} parameter of handleOpen method is required.`);\n }\n });\n $scope.setCurrent(index);\n $scope.state.src = $scope.state.childrens[index].state.src;\n $scope.setVisible(true);\n };\n\n $scope.handleClose = function () {\n $scope.setVisible(false);\n };\n\n $scope.handlePrev = function () {\n $scope.setCurrent($scope.state.current > 0 ? $scope.state.current - 1 : 0);\n $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handleNext = function () {\n $scope.setCurrent($scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 : $scope.state.childrens.length - 1);\n $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;\n };\n\n $scope.handlePreview = function () {\n let className;\n\n if ($attrs.class) {\n className = ` ${$attrs.class}`;\n }\n\n esNgAntd.createLayer(`\n <div class=\"ant-image-preview-root${className}\">\n <div class=\"ant-image-preview-mask\" ng-if=\"state.visible\"></div>\n <div class=\"ant-image-preview-wrap\" ng-show=\"state.visible\">\n <div class=\"ant-image-preview\">\n <div class=\"ant-image-preview-content\">\n <div class=\"ant-image-preview-body\">\n <ul class=\"ant-image-preview-operations\">\n <li class=\"ant-image-preview-operations-operation\">\n <span class=\"anticon anticon-close ant-image-preview-operations-icon\" ng-click=\"handleClose()\">\n <antd-icon type=\"CloseOutlined\"></antd-icon>\n </span>\n </li> \n </ul>\n <div class=\"ant-image-preview-img-wrapper\">\n <img class=\"ant-image-preview-img\" ng-src=\"{{state.src}}\"/>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}\" ng-click=\"handlePrev()\">\n <antd-icon type=\"LeftOutlined\"></antd-icon>\n </div>\n <div ng-class=\"{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}\" ng-click=\"handleNext()\">\n <antd-icon type=\"RightOutlined\"></antd-icon>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n `, $scope);\n };\n\n this.getContext = function () {\n return $scope;\n };\n },\n link: function ($scope, $element, $attrs) {\n [$element, $attrs].forEach(function (value, key) {\n if ([undefined, null, \"\"].includes(value)) {\n throw new Error(`${[\"$element\", \"$attrs\"][key]} parameter of constructor method is required.`);\n }\n });\n $scope.handlePreview();\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/ImagePreviewGroup/ImagePreviewGroup.js?");
185 185  
186 186 /***/ }),
187 187  
... ... @@ -367,7 +367,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Sel
367 367 \****************************/
368 368 /***/ (() => {
369 369  
370   -eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", function ($compile) {\n return {\n controllerAs: \"antdSlot\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n content: \"@\",\n context: \"=\",\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.watch = {\n content: (newValue) => {\n if (newValue !== undefined) {\n if (/<[^>]+>/.test(newValue)) {\n $scope.parentElement.empty().append(\n $compile(newValue)(\n $scope.context ? $scope.context : $scope\n )\n );\n } else {\n $element.text(newValue);\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n $scope.parentElement = $element.parent();\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?");
  370 +eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", function ($compile) {\n return {\n controllerAs: \"antdSlot\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n content: \"@\",\n context: \"=\",\n },\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.watch = {\n content: (newValue) => {\n if (newValue !== undefined) {\n if (/<[^>]+>/.test(newValue)) {\n $scope.parentElement\n .empty()\n .append(\n $compile(newValue)(\n $scope.context ? $scope.context : $scope\n )\n );\n } else {\n $element.text(newValue);\n }\n }\n },\n };\n\n for (const key in $scope.watch) {\n $scope.$watch(key, $scope.watch[key], true);\n }\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n $scope.parentElement = $element.parent();\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?");
371 371  
372 372 /***/ }),
373 373  
... ... @@ -9562,7 +9562,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
9562 9562 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
9563 9563  
9564 9564 "use strict";
9565   -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// Module\nvar code = \"<div class=\\\"ant-image\\\" ng-style=\\\"{width:width+'px',height:height+'px'}\\\">\\n <img class=\\\"ant-image-img\\\" ng-style=\\\"{width:'100%',height:height+'px'}\\\" ng-src=\\\"{{state.src}}\\\" />\\n <div ng-if=\\\"preview!=='false'&&state.hasImage\\" class=\\"ant-image-mask\\" ng-click=\\"handleOpen()\\">\n <div class=\\"ant-image-mask-info\\">\n <span class=\\"anticon anticon-eye\\">预览</span>\n </div>\n </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.html?");
  9565 +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// Module\nvar code = \"<div class=\\\"ant-image\\\" ng-style=\\\"{width:width+'px',height:height+'px'}\\\">\\n <img class=\\\"ant-image-img\\\" ng-style=\\\"{width:'100%',height:height+'px'}\\\" ng-src=\\\"{{state.src}}\\\" />\\n <div ng-if=\\\"preview!==false&&state.hasImage\\" class=\\"ant-image-mask\\" ng-click=\\"handleOpen()\\">\n <div class=\\"ant-image-mask-info\\">\n <span class=\\"anticon anticon-eye\\">预览</span>\n </div>\n </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Image/Image.html?");
9566 9566  
9567 9567 /***/ }),
9568 9568  
... ... @@ -9639,7 +9639,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
9639 9639 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
9640 9640  
9641 9641 "use strict";
9642   -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// Module\nvar code = \"<div>\\n <div ng-if=\\\"visible\\\" class=\\\"ant-modal-root\\\">\\n <div class=\\\"ant-modal-mask\\\" ng-style=\\\"{zIndex:1200}\\\"></div>\\n <div class=\\\"ant-modal-wrap\\\" ng-style=\\\"{zIndex:1200}\\">\n <div class=\\"ant-modal\\" ng-style=\\"{width:state.width+'px'}\\">\n <div class=\\"ant-modal-content\\">\n <button ng-if=\\"title\\" type=\\"button\\" class=\\"ant-modal-close\\" ng-click=\\"handleClose()\\">\n <span class=\\"ant-modal-close-x\\">\n <antd-icon type=\\"CloseOutlined\\"></antd-icon>\n </span>\n </button>\n <div ng-if=\\"title\\" class=\\"ant-modal-header\\">\n <div class=\\"ant-modal-title\\">{{title}}</div>\n </div>\n <div class=\\"ant-modal-body\\" ng-transclude></div>\n <div ng-if=\\"footer===undefined\\" class=\\"ant-modal-footer\\">\n <div>\n <antd-button ng-click=\\"onCancel()\\">{{state.cancelText}}</antd-button>\n <antd-button type=\\"primary\\" ng-click=\\"onOk()\\">{{state.okText}}</antd-button>\n </div>\n </div>\n <div ng-if=\\"footer!==undefined\\" class=\\"ant-modal-footer\\">\n <antd-slot content=\\"{{footer}}\\" context=\\"antdModal.getContext().$parent\\"></antd-slot>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Modal/Modal.html?");
  9642 +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// Module\nvar code = \"<div>\\n <div ng-if=\\\"visible\\\" class=\\\"ant-modal-root\\\">\\n <div class=\\\"ant-modal-mask\\\"></div>\\n <div class=\\\"ant-modal-wrap\\">\n <div class=\\"ant-modal\\" ng-style=\\"{width:state.width+'px'}\\">\n <div class=\\"ant-modal-content\\">\n <button ng-if=\\"title\\" type=\\"button\\" class=\\"ant-modal-close\\" ng-click=\\"handleClose()\\">\n <span class=\\"ant-modal-close-x\\">\n <antd-icon type=\\"CloseOutlined\\"></antd-icon>\n </span>\n </button>\n <div ng-if=\\"title\\" class=\\"ant-modal-header\\">\n <div class=\\"ant-modal-title\\">{{title}}</div>\n </div>\n <div class=\\"ant-modal-body\\" ng-transclude></div>\n <div ng-if=\\"footer===undefined\\" class=\\"ant-modal-footer\\">\n <div>\n <antd-button ng-click=\\"onCancel()\\">{{state.cancelText}}</antd-button>\n <antd-button type=\\"primary\\" ng-click=\\"onOk()\\">{{state.okText}}</antd-button>\n </div>\n </div>\n <div ng-if=\\"footer!==undefined\\" class=\\"ant-modal-footer\\">\n <antd-slot content=\\"{{footer}}\\" context=\\"antdModal.getContext().$parent\\"></antd-slot>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Modal/Modal.html?");
9643 9643  
9644 9644 /***/ }),
9645 9645  
... ... @@ -9793,7 +9793,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
9793 9793 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
9794 9794  
9795 9795 "use strict";
9796   -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// Module\nvar code = \"<div>\\n <textarea class=\\\"ant-input\\\" rows=\\\"4\\\" ng-model=\\\"state.value\\\" on-change=\\"handleChange()\\" placeholder=\\"{{placeholder}}\\" ng-keyup=\\"handleKeyup($event)\\" ng-click=\\"handleClick($event)\\" maxlength=\\"{{state.maxLength}}\\"></textarea>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.html?");
  9796 +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// Module\nvar code = \"<div>\\n <textarea class=\\\"ant-input\\\" rows=\\\"4\\\" ng-model=\\\"state.value\\\" ng-change=\\"handleChange()\\" placeholder=\\"{{placeholder}}\\" ng-keyup=\\"handleKeyup($event)\\" ng-click=\\"handleClick($event)\\" maxlength=\\"{{state.maxLength}}\\"></textarea>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Textarea/Textarea.html?");
9797 9797  
9798 9798 /***/ }),
9799 9799  
... ...
example/image.html
  Show/Hide comments   View file @9dc592c
... ... @@ -12,12 +12,12 @@
12 12 <body>
13 13 <div ng-app="esNgAntd" ng-controller="mainCtrl">
14 14 <div class="container" style="padding: 50px">
15   - <!-- <es-image d-src="{{url}}" width="200" height="200"></es-image> -->
  15 + <!-- <antd-image d-src="{{url}}" width="200" height="200"></antd-image> -->
16 16  
17   - <es-image-preview-group>
18   - <es-image d-src="{{url}}" width="200" height="200"></es-image>
19   - <es-image d-src="{{url}}" width="200" height="200"></es-image>
20   - </es-image-preview-group>
  17 + <antd-image-preview-group>
  18 + <antd-image d-src="{{url}}" width="200" height="200"></antd-image>
  19 + <antd-image d-src="{{url}}" width="200" height="200"></antd-image>
  20 + </antd-image-preview-group>
21 21 </div>
22 22 </div>
23 23 <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
... ...
package.json
  Show/Hide comments   View file @9dc592c
... ... @@ -6,13 +6,14 @@
6 6 "scripts": {
7 7 "build": "beanboom -s ./src/ -o ./build/ -t angular",
8 8 "watch": "npx beanboom -s ./src/ -o ./build/ -t angular -w",
  9 + "bwatch": "npx beanboom build -s ./src/ -o ./build/ -t angular -w",
9 10 "wp": "npx webpack --watch",
10 11 "wpb": "npx webpack"
11 12 },
12 13 "devDependencies": {
13 14 "@ant-design/icons-svg": "^4.2.1",
14 15 "antd": "^4.18.2",
15   - "beanboom": "0.8.7",
  16 + "beanboom": "^0.10.0-beta7",
16 17 "css-loader": "^6.5.1",
17 18 "html-loader": "^3.0.1",
18 19 "style-loader": "^3.3.1",
... ...
src/Image/Image.html
  Show/Hide comments   View file @9dc592c
... ... @@ -4,7 +4,7 @@
4 4 style={{ width: '100%', height: height + 'px' }}
5 5 src={state.src}
6 6 />
7   - {preview !== "false" && state.hasImage &&<div className="ant-image-mask" onClick={this.handleOpen}>
  7 + {preview !== false && state.hasImage &&<div className="ant-image-mask" onClick={this.handleOpen}>
8 8 <div className="ant-image-mask-info">
9 9 <span className="anticon anticon-eye">预览</span>
10 10 </div>
... ...
src/Image/Image.js
  Show/Hide comments   View file @9dc592c
... ... @@ -2,13 +2,6 @@ import template from &quot;./Image.html&quot;;
2 2 import style from "antd/lib/image/style/index.css";
3 3  
4 4 class Image {
5   - props = {
6   - src: String,
7   - dSrc: String,
8   - width: Number,
9   - height: Number,
10   - preview: Boolean
11   - };
12 5 state = {
13 6 src: "data:image/png;base64,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",
14 7 // 可见性
... ... @@ -19,24 +12,15 @@ class Image {
19 12 index: null,
20 13 };
21 14  
22   - template = template;
23   -
24   - require = ["antdImagePreviewGroup"]
  15 + require = ["^?antdImagePreviewGroup"];
25 16  
26 17 useModules = ["$timeout", "esNgAntd", "$compile"];
27 18  
28   - watch = {
29   - dSrc: function (newVal) {
30   - if (!["undefined", undefined, null, ""].includes(newVal)) {
31   - this.state.hasImage = true;
32   - this.state.src = newVal;
33   - }
34   - }
35   - }
36   -
37   - constructor(antdImagePreviewGroup) {
  19 + constructor($element, $attrs, $controllers) {
38 20 esNgAntd.createStyle("ant-image", style);
39 21 let src = this.state.src;
  22 + let [antdImagePreviewGroup] = $controllers;
  23 +
40 24 $element.children("img")[0].onerror = function () {
41 25 $timeout(function () {
42 26 this.state.hasImage = false;
... ... @@ -52,6 +36,15 @@ class Image {
52 36 }
53 37 }
54 38  
  39 + componentDidUpdate() {
  40 + if (prevProps.dSrc !== this.props.dSrc) {
  41 + if (!["undefined", undefined, null, ""].includes(newVal)) {
  42 + this.state.hasImage = true;
  43 + this.state.src = newVal;
  44 + }
  45 + }
  46 + }
  47 +
55 48 handleOpen() {
56 49 if (this.antdImagePreviewGroup) {
57 50 this.antdImagePreviewGroup.handleOpen(this.state.index);
... ... @@ -92,4 +85,16 @@ class Image {
92 85 document.body.appendChild(div);
93 86 $compile(div)($scope);
94 87 }
  88 +
  89 + render() {
  90 + return template;
  91 + }
95 92 }
  93 +
  94 +Image.propTypes = {
  95 + src: PropTypes.string,
  96 + dSrc: PropTypes.string,
  97 + width: PropTypes.number,
  98 + height: PropTypes.number,
  99 + preview: PropTypes.boolean,
  100 +};
... ...
src/ImagePreviewGroup/ImagePreviewGroup.js
  Show/Hide comments   View file @9dc592c
1 1 import template from "./ImagePreviewGroup.html";
2 2  
3 3 class ImagePreviewGroup {
4   - useModules = ["esNgAntd"];
5 4  
6   - props = {
7   - preview: Object,
8   - };
  5 + useModules = ["esNgAntd"];
9 6  
10   - template = template;
  7 + context = true;
11 8  
12 9 state = {
13 10 current: 0,
... ... @@ -16,7 +13,7 @@ class ImagePreviewGroup {
16 13 childrens: [],
17 14 };
18 15  
19   - constructor() {
  16 + constructor($element, $attrs) {
20 17 this.handlePreview();
21 18 }
22 19  
... ... @@ -107,4 +104,12 @@ class ImagePreviewGroup {
107 104 $scope
108 105 );
109 106 }
  107 +
  108 + render() {
  109 + return template;
  110 + }
  111 +}
  112 +
  113 +ImagePreviewGroup.propTypes = {
  114 + preview: propTypes.object
110 115 }
... ...
temp.txt 0 → 100644
  Show/Hide comments   View file @9dc592c
... ... @@ -0,0 +1,2 @@
  1 +image
  2 + preview=["']{{(.*?)}}["'] => preview="false"
0 3 \ No newline at end of file
... ...
webpack.config.js
  Show/Hide comments   View file @9dc592c
... ... @@ -10,9 +10,9 @@ module.exports = {
10 10 // boss
11 11 // path: "/Users/shann/Project/essa/boss/trunk/vendor-lib/ng-antd",
12 12 // mvo
13   - path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
  13 + // path: "/Users/shann/Project/essa/mvo/mvo-webapp/public/browser-vendor/ng-antd",
14 14 // local
15   - // path: path.resolve(__dirname, "dist"),
  15 + path: path.resolve(__dirname, "dist"),
16 16 filename: "ng-antd.js",
17 17 },
18 18 module: {
... ...
yarn.lock
  Show/Hide comments   View file @9dc592c
... ... @@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3:
1320 1320 dependencies:
1321 1321 "@babel/helper-define-polyfill-provider" "^0.2.4"
1322 1322  
1323   -beanboom@0.8.7:
1324   - version "0.8.7"
1325   - resolved "https://registry.npmmirror.com/beanboom/download/beanboom-0.8.7.tgz#64c3b6b874bd8c271ee1dfd9babfaa9a621ec1d6"
1326   - integrity sha512-/P0cRqcxybyx/ynRd9K12n++OrVj/NTUW5lJQ6ToqbrY/JPIHvGQGZnnLyQ1thzSIKl+0jaz/pvHlRF1TYOc7Q==
  1323 +beanboom@^0.10.0-beta7:
  1324 + version "0.10.0-beta7"
  1325 + resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.10.0-beta7.tgz#ccddfcd4d335bcdc415ca2711a9bf817ffe58c3e"
  1326 + integrity sha512-UnXoRlXsqR2NoLRpIphOVzKIGixwsN5jmYGzD5xjwzO1Qw9019YevExLvaeUFtlBOAgicBy1iwhbm82Ivw8sHQ==
1327 1327 dependencies:
1328 1328 "@babel/core" "^7.12.10"
1329 1329 "@babel/plugin-proposal-class-properties" "^7.13.0"
... ...