优化Input组件

Imshann
1 parent 91af8307
Showing 3 changed files with 10 additions and 9 deletions Show diff stats
build/Input/Input.js
dist/ng-antd.js
src/Input/Input.js
@@ -63,17 +63,18 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;antdInput&quot;, [&quot;$compile&quot;, &quot;esNgAntd&quot;, funct
     },
     link: function ($scope, $element, $attrs, $controllers) {
       let [antdForm, antdFormItem] = $controllers;
-      esNgAntd.createStyle("ant-input", style); // 上下文
+      esNgAntd.createStyle("ant-input", style);
+
+      if (antdFormItem) {
+        $scope.antdFormItem = antdFormItem.getContext();
+      } // 上下文
+
  
       if (antdForm) {
         $scope.antdForm = antdForm.getContext();
         $scope.antdForm.state.formItems.push($scope);
       }
  
-      if (antdFormItem) {
-        $scope.antdFormItem = antdFormItem.getContext();
-      }
-
       $scope.style = $attrs.style;
       $element.replaceWith($compile($scope.getTemplate())($scope));
     }
@@ -192,7 +192,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Ima
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
  
 "use strict";
-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?");
+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?");
  
 /***/ }),
  
@@ -15,14 +15,14 @@ class Input {
  
         esNgAntd.createStyle("ant-input", style);
  
+        if (antdFormItem) {
+            this.antdFormItem = antdFormItem.getContext();
+        }
         // 上下文
         if (antdForm) {
             this.antdForm = antdForm.getContext();
             this.antdForm.state.formItems.push($scope);
         }
-        if (antdFormItem) {
-            this.antdFormItem = antdFormItem.getContext();
-        }
         this.props.style = $attrs.style;
         $element.replaceWith($compile(this.getTemplate())($scope));
     }