Commit 50f4289a9f7cba0e3ab55996de24c34937ea3d02
1 parent
1145f171
优化Form组件
Showing
7 changed files
with
147 additions
and
150 deletions
Show diff stats
build/Button/Button.js
| 1 | -import style from "antd/lib/button/style/index.css"; | ||
| 2 | import template from "./Button.html"; | 1 | import template from "./Button.html"; |
| 2 | +import style from "antd/lib/button/style/index.css"; | ||
| 3 | angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAntd) { | 3 | angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAntd) { |
| 4 | return { | 4 | return { |
| 5 | template: template, | 5 | template: template, |
| @@ -30,7 +30,7 @@ angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAn | @@ -30,7 +30,7 @@ angular.module("esNgAntd").directive("antdButton", ["esNgAntd", function (esNgAn | ||
| 30 | } | 30 | } |
| 31 | }; | 31 | }; |
| 32 | }, | 32 | }, |
| 33 | - link: function ($scope) { | 33 | + link: function ($scope, $element) { |
| 34 | esNgAntd.createStyle("ant-btn", style); | 34 | esNgAntd.createStyle("ant-btn", style); |
| 35 | let className = ["ant-btn"]; | 35 | let className = ["ant-btn"]; |
| 36 | 36 |
build/Form/Form.js
| 1 | import template from "./Form.html"; | 1 | import template from "./Form.html"; |
| 2 | import style from "antd/lib/form/style/index.css"; | 2 | import style from "antd/lib/form/style/index.css"; |
| 3 | -angular.module("esNgAntd").directive("antdForm", function (esNgAntd) { | ||
| 4 | - return { | ||
| 5 | - controllerAs: "antdForm", | ||
| 6 | - restrict: "E", | ||
| 7 | - transclude: true, | ||
| 8 | - replace: true, | ||
| 9 | - scope: { | ||
| 10 | - name: "@", | ||
| 11 | - labelCol: "=", | ||
| 12 | - wrapperCol: "=", | ||
| 13 | - onFinish: "&", | ||
| 14 | - form: "=", | ||
| 15 | - }, | ||
| 16 | - template: template, | ||
| 17 | - controller: function ($scope, $element, $attrs) { | ||
| 18 | - this.getContext = function () { | ||
| 19 | - return $scope; | ||
| 20 | - }; | 3 | +angular.module("esNgAntd").directive("antdForm", ["esNgAntd", function (esNgAntd) { |
| 4 | + return { | ||
| 5 | + template: template, | ||
| 6 | + restrict: "E", | ||
| 7 | + replace: true, | ||
| 8 | + transclude: true, | ||
| 9 | + scope: { | ||
| 10 | + name: "@", | ||
| 11 | + labelCol: "=", | ||
| 12 | + wrapperCol: "=", | ||
| 13 | + form: "=", | ||
| 14 | + onFinish: "&" | ||
| 15 | + }, | ||
| 16 | + controller: function ($scope, $element) { | ||
| 17 | + this.getContext = function () { | ||
| 18 | + return $scope; | ||
| 19 | + }; | ||
| 21 | 20 | ||
| 22 | - $scope.state = { | ||
| 23 | - formItems: [], | ||
| 24 | - }; | 21 | + $scope.state = { |
| 22 | + formItems: [] | ||
| 23 | + }; | ||
| 25 | 24 | ||
| 26 | - $scope.resetFields = function () { | ||
| 27 | - $scope.state.formItems.forEach(function (item) { | ||
| 28 | - if (typeof item.setValue === "function") { | ||
| 29 | - item.setValue(item.defaultValue || null); | ||
| 30 | - } else { | ||
| 31 | - item.value = null; | ||
| 32 | - } | ||
| 33 | - }); | ||
| 34 | - }; | 25 | + $scope.resetFields = function () { |
| 26 | + $scope.state.formItems.forEach(function (item) { | ||
| 27 | + if (typeof item.setValue === "function") { | ||
| 28 | + item.setValue(item.defaultValue || null); | ||
| 29 | + } else { | ||
| 30 | + item.value = null; | ||
| 31 | + } | ||
| 32 | + }); | ||
| 33 | + }; | ||
| 35 | 34 | ||
| 36 | - $scope.submit = function () { | ||
| 37 | - $scope.handleSubmit(); | ||
| 38 | - }; | 35 | + $scope.submit = function () { |
| 36 | + $scope.handleSubmit(); | ||
| 37 | + }; | ||
| 39 | 38 | ||
| 40 | - $scope.handleSubmit = function () { | ||
| 41 | - let values = {}; | ||
| 42 | - $scope.state.formItems.forEach(function (item) { | ||
| 43 | - let name = item.antdFormItem && item.antdFormItem.name; | ||
| 44 | - let value = null; | 39 | + $scope.handleSubmit = function () { |
| 40 | + let values = {}; | ||
| 41 | + $scope.state.formItems.forEach(function (item) { | ||
| 42 | + let name = item.antdFormItem && item.antdFormItem.name; | ||
| 43 | + let value = null; | ||
| 45 | 44 | ||
| 46 | - if (item.state.type === "checkbox") { | ||
| 47 | - value = item.state.checked; | ||
| 48 | - } else { | ||
| 49 | - value = item.value || item.state.value; | ||
| 50 | - } | 45 | + if (item.state.type === "checkbox") { |
| 46 | + value = item.state.checked; | ||
| 47 | + } else { | ||
| 48 | + value = item.value || item.state.value; | ||
| 49 | + } | ||
| 51 | 50 | ||
| 52 | - values[name] = value; | ||
| 53 | - }); | ||
| 54 | - $scope.onFinish({ | ||
| 55 | - values: values, | ||
| 56 | - }); | ||
| 57 | - }; | ||
| 58 | - }, | ||
| 59 | - link: function ($scope, $element, $attrs, $controllers, $transclude) { | ||
| 60 | - esNgAntd.createStyle("ant-form", style); | 51 | + values[name] = value; |
| 52 | + }); | ||
| 53 | + $scope.onFinish({ | ||
| 54 | + values: values | ||
| 55 | + }); | ||
| 56 | + }; | ||
| 57 | + }, | ||
| 58 | + link: function ($scope, $element) { | ||
| 59 | + esNgAntd.createStyle("ant-form", style); | ||
| 61 | 60 | ||
| 62 | - if ($scope.form !== undefined) { | ||
| 63 | - $scope.form = $scope; | ||
| 64 | - } | 61 | + if ($scope.form !== undefined) { |
| 62 | + $scope.form = $scope; | ||
| 63 | + } | ||
| 65 | 64 | ||
| 66 | - if ($scope.name) { | ||
| 67 | - let inputs = $element[0].querySelectorAll("input"); | 65 | + if ($scope.name) { |
| 66 | + let inputs = $element[0].querySelectorAll("input"); | ||
| 68 | 67 | ||
| 69 | - for (let i = 0; i < inputs.length; i++) { | ||
| 70 | - const element = inputs[i]; | ||
| 71 | - element.id = $scope.name + "_" + element.id; | ||
| 72 | - } | ||
| 73 | - } | ||
| 74 | - }, | ||
| 75 | - }; | ||
| 76 | -}); | 68 | + for (let i = 0; i < inputs.length; i++) { |
| 69 | + const element = inputs[i]; | ||
| 70 | + element.id = $scope.name + "_" + element.id; | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + }; | ||
| 75 | +}]); | ||
| 77 | \ No newline at end of file | 76 | \ No newline at end of file |
build/FormItem/FormItem.js
| 1 | /** | 1 | /** |
| 2 | * 表单域 | 2 | * 表单域 |
| 3 | - * | ||
| 4 | - * @Author: Shann | ||
| 5 | - * @LastEditors: Shann | ||
| 6 | - * @Date: 2021-07-26 08:53:33 | ||
| 7 | - * @LastEditTime: 2021-08-05 14:03:05 | ||
| 8 | - * @FilePath: \angular-js-for-bootstrap\src\Essa\FormItem\FormItem.js | ||
| 9 | - * @Copyright: Copyright 2021-2021, all rights reserved. Essa.cn | ||
| 10 | */ | 3 | */ |
| 11 | import template from "./FormItem.html"; | 4 | import template from "./FormItem.html"; |
| 12 | angular.module("esNgAntd").directive("antdFormItem", function () { | 5 | angular.module("esNgAntd").directive("antdFormItem", function () { |
| 13 | - return { | ||
| 14 | - controllerAs: "antdFormItem", | ||
| 15 | - restrict: "E", | ||
| 16 | - transclude: true, | ||
| 17 | - replace: true, | ||
| 18 | - scope: { | ||
| 19 | - name: "@", | ||
| 20 | - label: "@", | ||
| 21 | - labelCol: "=", | ||
| 22 | - wrapperCol: "=", | ||
| 23 | - required: "@", | ||
| 24 | - }, | ||
| 25 | - template: template, | ||
| 26 | - controller: function ($scope, $element, $attrs) { | ||
| 27 | - this.getContext = function () { | ||
| 28 | - return $scope; | ||
| 29 | - }; | 6 | + return { |
| 7 | + template: template, | ||
| 8 | + restrict: "E", | ||
| 9 | + replace: true, | ||
| 10 | + transclude: true, | ||
| 11 | + scope: { | ||
| 12 | + name: "@", | ||
| 13 | + label: "@", | ||
| 14 | + labelCol: "=", | ||
| 15 | + wrapperCol: "=", | ||
| 16 | + required: "=" | ||
| 17 | + }, | ||
| 18 | + require: ["^?antdForm"], | ||
| 19 | + controller: function ($scope, $element, $attrs) { | ||
| 20 | + this.getContext = function () { | ||
| 21 | + return $scope; | ||
| 22 | + }; | ||
| 30 | 23 | ||
| 31 | - $scope.state = { | ||
| 32 | - labelCol: null, | ||
| 33 | - wrapperCol: null, | ||
| 34 | - }; | ||
| 35 | - }, | ||
| 36 | - require: ["?^antdForm"], | ||
| 37 | - link: function ($scope, $element, $attrs, $controllers, $transclude) { | ||
| 38 | - let [antdForm] = $controllers; | ||
| 39 | - $scope.antdForm = antdForm.getContext(); | 24 | + $scope.state = { |
| 25 | + labelCol: null, | ||
| 26 | + wrapperCol: null | ||
| 27 | + }; | ||
| 28 | + }, | ||
| 29 | + link: function ($scope, $element, $attrs, $controllers) { | ||
| 30 | + let [antdForm] = $controllers; | ||
| 40 | 31 | ||
| 41 | - if ($scope.labelCol && $scope.labelCol.span) { | ||
| 42 | - $scope.state.labelCol = $scope.labelCol.span; | ||
| 43 | - } else if ( | ||
| 44 | - $scope.antdForm.labelCol && | ||
| 45 | - $scope.antdForm.labelCol.span | ||
| 46 | - ) { | ||
| 47 | - $scope.state.labelCol = $scope.antdForm.labelCol.span; | ||
| 48 | - } | 32 | + if (antdForm) { |
| 33 | + $scope.antdForm = antdForm.getContext(); | ||
| 34 | + } | ||
| 49 | 35 | ||
| 50 | - if ($scope.wrapperCol && $scope.wrapperCol.span) { | ||
| 51 | - $scope.state.wrapperCol = $scope.wrapperCol.span; | ||
| 52 | - } else if ( | ||
| 53 | - $scope.antdForm.wrapperCol && | ||
| 54 | - $scope.antdForm.wrapperCol.span | ||
| 55 | - ) { | ||
| 56 | - $scope.state.wrapperCol = $scope.antdForm.wrapperCol.span; | ||
| 57 | - } | ||
| 58 | - }, | ||
| 59 | - }; | ||
| 60 | -}); | 36 | + if ($scope.labelCol && $scope.labelCol.span) { |
| 37 | + $scope.state.labelCol = $scope.labelCol.span; | ||
| 38 | + } else if ($scope.antdForm.labelCol && $scope.antdForm.labelCol.span) { | ||
| 39 | + $scope.state.labelCol = $scope.antdForm.labelCol.span; | ||
| 40 | + } | ||
| 41 | + | ||
| 42 | + if ($scope.wrapperCol && $scope.wrapperCol.span) { | ||
| 43 | + $scope.state.wrapperCol = $scope.wrapperCol.span; | ||
| 44 | + } else if ($scope.antdForm.wrapperCol && $scope.antdForm.wrapperCol.span) { | ||
| 45 | + $scope.state.wrapperCol = $scope.antdForm.wrapperCol.span; | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + }; | ||
| 49 | +}); | ||
| 61 | \ No newline at end of file | 50 | \ No newline at end of file |
dist/ng-antd.js
| @@ -49,7 +49,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre | @@ -49,7 +49,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre | ||
| 49 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 49 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 50 | 50 | ||
| 51 | "use strict"; | 51 | "use strict"; |
| 52 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Button_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\",\n size: \"@\",\n htmlType: \"@\",\n ghost: \"=\",\n loading: \"=\"\n },\n controller: function ($scope, $element) {\n $scope.state = {\n disabled: null,\n className: \"\"\n };\n $scope.watch = {\n loading: newVal => {\n if (newVal !== undefined) {\n if (newVal === \"true\") {\n $scope.state.className += \" ant-btn-loading\";\n } else {\n $scope.state.className = $scope.state.className.replace(\" ant-btn-loading\", \"\");\n }\n }\n }\n };\n },\n link: function ($scope) {\n esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n let className = [\"ant-btn\"];\n\n if ($scope.type) {\n className.push(\"ant-btn-\" + $scope.type);\n }\n\n if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n className.push(\"ant-btn-\" + $scope.size);\n }\n\n if ($scope.ghost) {\n className.push(\"ant-btn-background-ghost\");\n }\n\n $scope.state.className = className.join(\" \");\n\n if ($scope.htmlType) {\n $element[0].setAttribute(\"type\", $scope.htmlType);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?"); | 52 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Button_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n type: \"@\",\n size: \"@\",\n htmlType: \"@\",\n ghost: \"=\",\n loading: \"=\"\n },\n controller: function ($scope, $element) {\n $scope.state = {\n disabled: null,\n className: \"\"\n };\n $scope.watch = {\n loading: newVal => {\n if (newVal !== undefined) {\n if (newVal === \"true\") {\n $scope.state.className += \" ant-btn-loading\";\n } else {\n $scope.state.className = $scope.state.className.replace(\" ant-btn-loading\", \"\");\n }\n }\n }\n };\n },\n link: function ($scope, $element) {\n esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n let className = [\"ant-btn\"];\n\n if ($scope.type) {\n className.push(\"ant-btn-\" + $scope.type);\n }\n\n if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n className.push(\"ant-btn-\" + $scope.size);\n }\n\n if ($scope.ghost) {\n className.push(\"ant-btn-background-ghost\");\n }\n\n $scope.state.className = className.join(\" \");\n\n if ($scope.htmlType) {\n $element[0].setAttribute(\"type\", $scope.htmlType);\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?"); |
| 53 | 53 | ||
| 54 | /***/ }), | 54 | /***/ }), |
| 55 | 55 | ||
| @@ -137,7 +137,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | @@ -137,7 +137,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | ||
| 137 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 137 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 138 | 138 | ||
| 139 | "use strict"; | 139 | "use strict"; |
| 140 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Form_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Form.html */ \"./build/Form/Form.html\");\n/* harmony import */ var antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/form/style/index.css */ \"./node_modules/antd/lib/form/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdForm\", function (esNgAntd) {\n return {\n controllerAs: \"antdForm\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n name: \"@\",\n labelCol: \"=\",\n wrapperCol: \"=\",\n onFinish: \"&\",\n form: \"=\",\n },\n template: _Form_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 formItems: [],\n };\n\n $scope.resetFields = function () {\n $scope.state.formItems.forEach(function (item) {\n if (typeof item.setValue === \"function\") {\n item.setValue(item.defaultValue || null);\n } else {\n item.value = null;\n }\n });\n };\n\n $scope.submit = function () {\n $scope.handleSubmit();\n };\n\n $scope.handleSubmit = function () {\n let values = {};\n $scope.state.formItems.forEach(function (item) {\n let name = item.antdFormItem && item.antdFormItem.name;\n let value = null;\n\n if (item.state.type === \"checkbox\") {\n value = item.state.checked;\n } else {\n value = item.value || item.state.value;\n }\n\n values[name] = value;\n });\n $scope.onFinish({\n values: values,\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-form\", antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.form !== undefined) {\n $scope.form = $scope;\n }\n\n if ($scope.name) {\n let inputs = $element[0].querySelectorAll(\"input\");\n\n for (let i = 0; i < inputs.length; i++) {\n const element = inputs[i];\n element.id = $scope.name + \"_\" + element.id;\n }\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Form/Form.js?"); | 140 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Form_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Form.html */ \"./build/Form/Form.html\");\n/* harmony import */ var antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/form/style/index.css */ \"./node_modules/antd/lib/form/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdForm\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _Form_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n name: \"@\",\n labelCol: \"=\",\n wrapperCol: \"=\",\n form: \"=\",\n onFinish: \"&\"\n },\n controller: function ($scope, $element) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n formItems: []\n };\n\n $scope.resetFields = function () {\n $scope.state.formItems.forEach(function (item) {\n if (typeof item.setValue === \"function\") {\n item.setValue(item.defaultValue || null);\n } else {\n item.value = null;\n }\n });\n };\n\n $scope.submit = function () {\n $scope.handleSubmit();\n };\n\n $scope.handleSubmit = function () {\n let values = {};\n $scope.state.formItems.forEach(function (item) {\n let name = item.antdFormItem && item.antdFormItem.name;\n let value = null;\n\n if (item.state.type === \"checkbox\") {\n value = item.state.checked;\n } else {\n value = item.value || item.state.value;\n }\n\n values[name] = value;\n });\n $scope.onFinish({\n values: values\n });\n };\n },\n link: function ($scope, $element) {\n esNgAntd.createStyle(\"ant-form\", antd_lib_form_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n if ($scope.form !== undefined) {\n $scope.form = $scope;\n }\n\n if ($scope.name) {\n let inputs = $element[0].querySelectorAll(\"input\");\n\n for (let i = 0; i < inputs.length; i++) {\n const element = inputs[i];\n element.id = $scope.name + \"_\" + element.id;\n }\n }\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Form/Form.js?"); |
| 141 | 141 | ||
| 142 | /***/ }), | 142 | /***/ }), |
| 143 | 143 | ||
| @@ -148,7 +148,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _For | @@ -148,7 +148,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _For | ||
| 148 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 148 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 149 | 149 | ||
| 150 | "use strict"; | 150 | "use strict"; |
| 151 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _FormItem_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FormItem.html */ \"./build/FormItem/FormItem.html\");\n/**\n * 表单域\n *\n * @Author: Shann\n * @LastEditors: Shann\n * @Date: 2021-07-26 08:53:33\n * @LastEditTime: 2021-08-05 14:03:05\n * @FilePath: \\angular-js-for-bootstrap\\src\\Essa\\FormItem\\FormItem.js\n * @Copyright: Copyright 2021-2021, all rights reserved. Essa.cn\n */\n\nangular.module(\"esNgAntd\").directive(\"antdFormItem\", function () {\n return {\n controllerAs: \"antdFormItem\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n name: \"@\",\n label: \"@\",\n labelCol: \"=\",\n wrapperCol: \"=\",\n required: \"@\",\n },\n template: _FormItem_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 labelCol: null,\n wrapperCol: null,\n };\n },\n require: [\"?^antdForm\"],\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n let [antdForm] = $controllers;\n $scope.antdForm = antdForm.getContext();\n\n if ($scope.labelCol && $scope.labelCol.span) {\n $scope.state.labelCol = $scope.labelCol.span;\n } else if (\n $scope.antdForm.labelCol &&\n $scope.antdForm.labelCol.span\n ) {\n $scope.state.labelCol = $scope.antdForm.labelCol.span;\n }\n\n if ($scope.wrapperCol && $scope.wrapperCol.span) {\n $scope.state.wrapperCol = $scope.wrapperCol.span;\n } else if (\n $scope.antdForm.wrapperCol &&\n $scope.antdForm.wrapperCol.span\n ) {\n $scope.state.wrapperCol = $scope.antdForm.wrapperCol.span;\n }\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/FormItem/FormItem.js?"); | 151 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _FormItem_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FormItem.html */ \"./build/FormItem/FormItem.html\");\n/**\n * 表单域\n */\n\nangular.module(\"esNgAntd\").directive(\"antdFormItem\", function () {\n return {\n template: _FormItem_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n name: \"@\",\n label: \"@\",\n labelCol: \"=\",\n wrapperCol: \"=\",\n required: \"=\"\n },\n require: [\"^?antdForm\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.state = {\n labelCol: null,\n wrapperCol: null\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n let [antdForm] = $controllers;\n\n if (antdForm) {\n $scope.antdForm = antdForm.getContext();\n }\n\n if ($scope.labelCol && $scope.labelCol.span) {\n $scope.state.labelCol = $scope.labelCol.span;\n } else if ($scope.antdForm.labelCol && $scope.antdForm.labelCol.span) {\n $scope.state.labelCol = $scope.antdForm.labelCol.span;\n }\n\n if ($scope.wrapperCol && $scope.wrapperCol.span) {\n $scope.state.wrapperCol = $scope.wrapperCol.span;\n } else if ($scope.antdForm.wrapperCol && $scope.antdForm.wrapperCol.span) {\n $scope.state.wrapperCol = $scope.antdForm.wrapperCol.span;\n }\n }\n };\n});\n\n//# sourceURL=webpack://ng-antd/./build/FormItem/FormItem.js?"); |
| 152 | 152 | ||
| 153 | /***/ }), | 153 | /***/ }), |
| 154 | 154 |
src/Button/Button.js
| @@ -25,7 +25,7 @@ class Button { | @@ -25,7 +25,7 @@ class Button { | ||
| 25 | }, | 25 | }, |
| 26 | }; | 26 | }; |
| 27 | 27 | ||
| 28 | - constructor() { | 28 | + constructor($element) { |
| 29 | esNgAntd.createStyle("ant-btn", style); | 29 | esNgAntd.createStyle("ant-btn", style); |
| 30 | 30 | ||
| 31 | let className = ["ant-btn"]; | 31 | let className = ["ant-btn"]; |
src/Form/Form.js
| @@ -4,21 +4,13 @@ import style from "antd/lib/form/style/index.css"; | @@ -4,21 +4,13 @@ import style from "antd/lib/form/style/index.css"; | ||
| 4 | class Form { | 4 | class Form { |
| 5 | useModules = ["esNgAntd"]; | 5 | useModules = ["esNgAntd"]; |
| 6 | 6 | ||
| 7 | - template = template; | ||
| 8 | - | ||
| 9 | - props = { | ||
| 10 | - name: String, | ||
| 11 | - labelCol: Object, | ||
| 12 | - wrapperCol: Object, | ||
| 13 | - onFinish: Function, | ||
| 14 | - form: Object, | ||
| 15 | - }; | 7 | + context = true; |
| 16 | 8 | ||
| 17 | state = { | 9 | state = { |
| 18 | formItems: [], | 10 | formItems: [], |
| 19 | }; | 11 | }; |
| 20 | 12 | ||
| 21 | - constructor() { | 13 | + constructor($element) { |
| 22 | esNgAntd.createStyle("ant-form", style); | 14 | esNgAntd.createStyle("ant-form", style); |
| 23 | 15 | ||
| 24 | if (this.form !== undefined) { | 16 | if (this.form !== undefined) { |
| @@ -64,4 +56,16 @@ class Form { | @@ -64,4 +56,16 @@ class Form { | ||
| 64 | values: values, | 56 | values: values, |
| 65 | }); | 57 | }); |
| 66 | } | 58 | } |
| 59 | + | ||
| 60 | + render() { | ||
| 61 | + return template; | ||
| 62 | + } | ||
| 67 | } | 63 | } |
| 64 | + | ||
| 65 | +Form.propTypes = { | ||
| 66 | + name: PropTypes.string, | ||
| 67 | + labelCol: PropTypes.object, | ||
| 68 | + wrapperCol: PropTypes.object, | ||
| 69 | + form: PropTypes.object, | ||
| 70 | + onFinish: PropTypes.function, | ||
| 71 | +}; |
src/FormItem/FormItem.js
| 1 | /** | 1 | /** |
| 2 | * 表单域 | 2 | * 表单域 |
| 3 | - * | ||
| 4 | - * @Author: Shann | ||
| 5 | - * @LastEditors: Shann | ||
| 6 | - * @Date: 2021-07-26 08:53:33 | ||
| 7 | - * @LastEditTime: 2021-08-05 14:03:05 | ||
| 8 | - * @FilePath: \angular-js-for-bootstrap\src\Essa\FormItem\FormItem.js | ||
| 9 | - * @Copyright: Copyright 2021-2021, all rights reserved. Essa.cn | ||
| 10 | */ | 3 | */ |
| 11 | import template from "./FormItem.html"; | 4 | import template from "./FormItem.html"; |
| 12 | 5 | ||
| 13 | class FormItem { | 6 | class FormItem { |
| 14 | - props = { | ||
| 15 | - name: String, | ||
| 16 | - label: String, | ||
| 17 | - labelCol: Object, | ||
| 18 | - wrapperCol: Object, | ||
| 19 | - required: Boolean, | ||
| 20 | - }; | 7 | + |
| 8 | + require = ["^?antdForm"]; | ||
| 9 | + | ||
| 10 | + context = true; | ||
| 11 | + | ||
| 21 | state = { | 12 | state = { |
| 22 | labelCol: null, | 13 | labelCol: null, |
| 23 | wrapperCol: null, | 14 | wrapperCol: null, |
| 24 | }; | 15 | }; |
| 25 | 16 | ||
| 26 | - template = template; | 17 | + constructor($element, $attrs, $controllers) { |
| 18 | + let [antdForm] = $controllers; | ||
| 27 | 19 | ||
| 28 | - constructor(antdForm) { | ||
| 29 | - this.antdForm = antdForm.getContext(); | 20 | + if (antdForm) { |
| 21 | + this.antdForm = antdForm.getContext(); | ||
| 22 | + } | ||
| 30 | 23 | ||
| 31 | if (this.props.labelCol && this.props.labelCol.span) { | 24 | if (this.props.labelCol && this.props.labelCol.span) { |
| 32 | this.state.labelCol = this.props.labelCol.span; | 25 | this.state.labelCol = this.props.labelCol.span; |
| @@ -46,4 +39,16 @@ class FormItem { | @@ -46,4 +39,16 @@ class FormItem { | ||
| 46 | this.state.wrapperCol = this.antdForm.wrapperCol.span; | 39 | this.state.wrapperCol = this.antdForm.wrapperCol.span; |
| 47 | } | 40 | } |
| 48 | } | 41 | } |
| 42 | + | ||
| 43 | + render() { | ||
| 44 | + return template; | ||
| 45 | + } | ||
| 49 | } | 46 | } |
| 47 | + | ||
| 48 | +FormItem.propTypes = { | ||
| 49 | + name: PropTypes.string, | ||
| 50 | + label: PropTypes.string, | ||
| 51 | + labelCol: PropTypes.object, | ||
| 52 | + wrapperCol: PropTypes.object, | ||
| 53 | + required: PropTypes.boolean, | ||
| 54 | +}; |