Commit e154891a864519d8548f59af356158ec16f9d14e
1 parent
91af8307
优化Input组件
Showing
3 changed files
with
10 additions
and
9 deletions
Show diff stats
build/Input/Input.js
| @@ -63,17 +63,18 @@ angular.module("esNgAntd").directive("antdInput", ["$compile", "esNgAntd", funct | @@ -63,17 +63,18 @@ angular.module("esNgAntd").directive("antdInput", ["$compile", "esNgAntd", funct | ||
| 63 | }, | 63 | }, |
| 64 | link: function ($scope, $element, $attrs, $controllers) { | 64 | link: function ($scope, $element, $attrs, $controllers) { |
| 65 | let [antdForm, antdFormItem] = $controllers; | 65 | let [antdForm, antdFormItem] = $controllers; |
| 66 | - esNgAntd.createStyle("ant-input", style); // 上下文 | 66 | + esNgAntd.createStyle("ant-input", style); |
| 67 | + | ||
| 68 | + if (antdFormItem) { | ||
| 69 | + $scope.antdFormItem = antdFormItem.getContext(); | ||
| 70 | + } // 上下文 | ||
| 71 | + | ||
| 67 | 72 | ||
| 68 | if (antdForm) { | 73 | if (antdForm) { |
| 69 | $scope.antdForm = antdForm.getContext(); | 74 | $scope.antdForm = antdForm.getContext(); |
| 70 | $scope.antdForm.state.formItems.push($scope); | 75 | $scope.antdForm.state.formItems.push($scope); |
| 71 | } | 76 | } |
| 72 | 77 | ||
| 73 | - if (antdFormItem) { | ||
| 74 | - $scope.antdFormItem = antdFormItem.getContext(); | ||
| 75 | - } | ||
| 76 | - | ||
| 77 | $scope.style = $attrs.style; | 78 | $scope.style = $attrs.style; |
| 78 | $element.replaceWith($compile($scope.getTemplate())($scope)); | 79 | $element.replaceWith($compile($scope.getTemplate())($scope)); |
| 79 | } | 80 | } |
dist/ng-antd.js
| @@ -192,7 +192,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima | @@ -192,7 +192,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima | ||
| 192 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 192 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 193 | 193 | ||
| 194 | "use strict"; | 194 | "use strict"; |
| 195 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n\nangular.module(\"esNgAntd\").directive(\"antdInput\", [\"$compile\", \"esNgAntd\", function ($compile, esNgAntd) {\n return {\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n addonBefore: \"@\",\n addonAfter: \"@\",\n disabled: \"=\",\n onChange: \"&\",\n maxLength: \"=\"\n },\n require: [\"^?antdFormItem\", \"^?antdForm\"],\n controller: function ($scope, $element, $attrs) {\n $scope.state = {\n inputEventTarget: null\n };\n\n $scope.handleClick = function (event) {\n $scope.state.inputEventTarget = event;\n };\n\n $scope.handleChange = function () {\n $scope.onChange({\n event: $scope.state.inputEventTarget\n });\n };\n\n $scope.getTemplate = function () {\n let maxLengthAttribute = \"\";\n let styleAttribute = \"\";\n let idAttribute = \"\";\n\n if ($scope.maxLength) {\n maxLengthAttribute = `maxlength=\"${$scope.maxLength}\"`;\n }\n\n if ($scope.style) {\n styleAttribute = `style=\"${$scope.style}\"`;\n }\n\n if ($scope.antdFormItem && $scope.antdFormItem.name) {\n idAttribute = `id=\"${$scope.antdFormItem.name}\"`;\n }\n\n let templates = [`<input type=\"text\" class=\"ant-input\" placeholder={{placeholder}} ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled===true\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`, `<span class=\"ant-input-group-wrapper\" ng-if=\"addonBefore||addonAfter\">\n <span class=\"ant-input-wrapper ant-input-group\" style=\"\">\n <span class=\"ant-input-group-addon\" ng-if=\"addonBefore\">{{addonBefore}}</span>\n <input type=\"text\" class=\"ant-input\" ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled===true\" style=\"${$scope.style}\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>\n <span class=\"ant-input-group-addon\" ng-if=\"addonAfter\">{{addonAfter}}</span>\n </span>\n </span>`];\n\n if ($scope.addonBefore || $scope.addonAfter) {\n return templates[1];\n } else {\n return templates[0];\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n let [antdForm, antdFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-input\", antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]); // 上下文\n\n if (antdForm) {\n $scope.antdForm = antdForm.getContext();\n $scope.antdForm.state.formItems.push($scope);\n }\n\n if (antdFormItem) {\n $scope.antdFormItem = antdFormItem.getContext();\n }\n\n $scope.style = $attrs.style;\n $element.replaceWith($compile($scope.getTemplate())($scope));\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Input/Input.js?"); | 195 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/input/style/index.css */ \"./node_modules/antd/lib/input/style/index.css\");\n\nangular.module(\"esNgAntd\").directive(\"antdInput\", [\"$compile\", \"esNgAntd\", function ($compile, esNgAntd) {\n return {\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n value: \"@\",\n placeholder: \"@\",\n addonBefore: \"@\",\n addonAfter: \"@\",\n disabled: \"=\",\n onChange: \"&\",\n maxLength: \"=\"\n },\n require: [\"^?antdFormItem\", \"^?antdForm\"],\n controller: function ($scope, $element, $attrs) {\n $scope.state = {\n inputEventTarget: null\n };\n\n $scope.handleClick = function (event) {\n $scope.state.inputEventTarget = event;\n };\n\n $scope.handleChange = function () {\n $scope.onChange({\n event: $scope.state.inputEventTarget\n });\n };\n\n $scope.getTemplate = function () {\n let maxLengthAttribute = \"\";\n let styleAttribute = \"\";\n let idAttribute = \"\";\n\n if ($scope.maxLength) {\n maxLengthAttribute = `maxlength=\"${$scope.maxLength}\"`;\n }\n\n if ($scope.style) {\n styleAttribute = `style=\"${$scope.style}\"`;\n }\n\n if ($scope.antdFormItem && $scope.antdFormItem.name) {\n idAttribute = `id=\"${$scope.antdFormItem.name}\"`;\n }\n\n let templates = [`<input type=\"text\" class=\"ant-input\" placeholder={{placeholder}} ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled===true\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>`, `<span class=\"ant-input-group-wrapper\" ng-if=\"addonBefore||addonAfter\">\n <span class=\"ant-input-wrapper ant-input-group\" style=\"\">\n <span class=\"ant-input-group-addon\" ng-if=\"addonBefore\">{{addonBefore}}</span>\n <input type=\"text\" class=\"ant-input\" ng-change=\"handleChange()\" ng-model=\"value\" ng-focus=\"handleClick($event)\" ng-disabled=\"disabled===true\" style=\"${$scope.style}\" ${styleAttribute} ${maxLengthAttribute} ${idAttribute}/>\n <span class=\"ant-input-group-addon\" ng-if=\"addonAfter\">{{addonAfter}}</span>\n </span>\n </span>`];\n\n if ($scope.addonBefore || $scope.addonAfter) {\n return templates[1];\n } else {\n return templates[0];\n }\n };\n },\n link: function ($scope, $element, $attrs, $controllers) {\n let [antdForm, antdFormItem] = $controllers;\n esNgAntd.createStyle(\"ant-input\", antd_lib_input_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n\n if (antdFormItem) {\n $scope.antdFormItem = antdFormItem.getContext();\n } // 上下文\n\n\n if (antdForm) {\n $scope.antdForm = antdForm.getContext();\n $scope.antdForm.state.formItems.push($scope);\n }\n\n $scope.style = $attrs.style;\n $element.replaceWith($compile($scope.getTemplate())($scope));\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Input/Input.js?"); |
| 196 | 196 | ||
| 197 | /***/ }), | 197 | /***/ }), |
| 198 | 198 |
src/Input/Input.js
| @@ -15,14 +15,14 @@ class Input { | @@ -15,14 +15,14 @@ class Input { | ||
| 15 | 15 | ||
| 16 | esNgAntd.createStyle("ant-input", style); | 16 | esNgAntd.createStyle("ant-input", style); |
| 17 | 17 | ||
| 18 | + if (antdFormItem) { | ||
| 19 | + this.antdFormItem = antdFormItem.getContext(); | ||
| 20 | + } | ||
| 18 | // 上下文 | 21 | // 上下文 |
| 19 | if (antdForm) { | 22 | if (antdForm) { |
| 20 | this.antdForm = antdForm.getContext(); | 23 | this.antdForm = antdForm.getContext(); |
| 21 | this.antdForm.state.formItems.push($scope); | 24 | this.antdForm.state.formItems.push($scope); |
| 22 | } | 25 | } |
| 23 | - if (antdFormItem) { | ||
| 24 | - this.antdFormItem = antdFormItem.getContext(); | ||
| 25 | - } | ||
| 26 | this.props.style = $attrs.style; | 26 | this.props.style = $attrs.style; |
| 27 | $element.replaceWith($compile(this.getTemplate())($scope)); | 27 | $element.replaceWith($compile(this.getTemplate())($scope)); |
| 28 | } | 28 | } |