Commit ee8e8c097fe8fdcbe369b49ff04cd6df42ea114d
1 parent
ddd373d9
优化CheckableTag组件
Showing
6 changed files
with
41 additions
and
44 deletions
Show diff stats
build/CheckableTag/CheckableTag.html
| 1 | -<span ng-class="'ant-tag ant-tag-checkable'+(checked==='true'?' ant-tag-checkable-checked':'')" ng-click="handleClick()" ng-transclude></span> | ||
| 2 | \ No newline at end of file | 1 | \ No newline at end of file |
| 2 | +<span ng-class="'ant-tag ant-tag-checkable'+(checked===true?' ant-tag-checkable-checked':'')" ng-click="handleClick()" ng-transclude></span> | ||
| 3 | \ No newline at end of file | 3 | \ No newline at end of file |
build/CheckableTag/CheckableTag.js
| 1 | -import template from "./CheckableTag.html"; | ||
| 2 | import style from "antd/lib/tag/style/index.css"; | 1 | import style from "antd/lib/tag/style/index.css"; |
| 3 | -angular.module("esNgAntd").directive("antdCheckableTag", function (esNgAntd) { | ||
| 4 | - return { | ||
| 5 | - controllerAs: "antdCheckableTag", | ||
| 6 | - restrict: "E", | ||
| 7 | - transclude: true, | ||
| 8 | - replace: true, | ||
| 9 | - scope: { | ||
| 10 | - checked: "@", | ||
| 11 | - onChange: "&", | ||
| 12 | - }, | ||
| 13 | - template: template, | ||
| 14 | - controller: function ($scope, $element, $attrs) { | ||
| 15 | - this.getContext = function () { | ||
| 16 | - return $scope; | ||
| 17 | - }; | ||
| 18 | - | ||
| 19 | - $scope.handleClick = function () { | ||
| 20 | - $scope.onChange({ | ||
| 21 | - checked: !($scope.checked === "true"), | ||
| 22 | - }); | ||
| 23 | - }; | ||
| 24 | - }, | ||
| 25 | - link: function ($scope, $element, $attrs, $controllers, $transclude) { | ||
| 26 | - esNgAntd.createStyle("ant-tag", style); | ||
| 27 | - }, | ||
| 28 | - }; | ||
| 29 | -}); | 2 | +import template from "./CheckableTag.html"; |
| 3 | +angular.module("esNgAntd").directive("antdCheckableTag", ["esNgAntd", function (esNgAntd) { | ||
| 4 | + return { | ||
| 5 | + template: template, | ||
| 6 | + restrict: "E", | ||
| 7 | + replace: true, | ||
| 8 | + transclude: true, | ||
| 9 | + scope: { | ||
| 10 | + checked: "=", | ||
| 11 | + onChange: "&" | ||
| 12 | + }, | ||
| 13 | + controller: function ($scope) { | ||
| 14 | + $scope.handleClick = function () { | ||
| 15 | + $scope.onChange({ | ||
| 16 | + checked: !($scope.checked === true) | ||
| 17 | + }); | ||
| 18 | + }; | ||
| 19 | + }, | ||
| 20 | + link: function ($scope) { | ||
| 21 | + esNgAntd.createStyle("ant-tag", style); | ||
| 22 | + } | ||
| 23 | + }; | ||
| 24 | +}]); | ||
| 30 | \ No newline at end of file | 25 | \ No newline at end of file |
dist/ng-antd.js
| @@ -71,7 +71,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd | @@ -71,7 +71,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd | ||
| 71 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 71 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 72 | 72 | ||
| 73 | "use strict"; | 73 | "use strict"; |
| 74 | -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _CheckableTag_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CheckableTag.html */ \"./build/CheckableTag/CheckableTag.html\");\n/* harmony import */ var antd_lib_tag_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/tag/style/index.css */ \"./node_modules/antd/lib/tag/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCheckableTag\", function (esNgAntd) {\n return {\n controllerAs: \"antdCheckableTag\",\n restrict: \"E\",\n transclude: true,\n replace: true,\n scope: {\n checked: \"@\",\n onChange: \"&\",\n },\n template: _CheckableTag_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n controller: function ($scope, $element, $attrs) {\n this.getContext = function () {\n return $scope;\n };\n\n $scope.handleClick = function () {\n $scope.onChange({\n checked: !($scope.checked === \"true\"),\n });\n };\n },\n link: function ($scope, $element, $attrs, $controllers, $transclude) {\n esNgAntd.createStyle(\"ant-tag\", antd_lib_tag_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n },\n };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/CheckableTag/CheckableTag.js?"); | 74 | +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_tag_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/tag/style/index.css */ \"./node_modules/antd/lib/tag/style/index.css\");\n/* harmony import */ var _CheckableTag_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CheckableTag.html */ \"./build/CheckableTag/CheckableTag.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCheckableTag\", [\"esNgAntd\", function (esNgAntd) {\n return {\n template: _CheckableTag_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n restrict: \"E\",\n replace: true,\n transclude: true,\n scope: {\n checked: \"=\",\n onChange: \"&\"\n },\n controller: function ($scope) {\n $scope.handleClick = function () {\n $scope.onChange({\n checked: !($scope.checked === true)\n });\n };\n },\n link: function ($scope) {\n esNgAntd.createStyle(\"ant-tag\", antd_lib_tag_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n }\n };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/CheckableTag/CheckableTag.js?"); |
| 75 | 75 | ||
| 76 | /***/ }), | 76 | /***/ }), |
| 77 | 77 | ||
| @@ -9485,7 +9485,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | @@ -9485,7 +9485,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac | ||
| 9485 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { | 9485 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { |
| 9486 | 9486 | ||
| 9487 | "use strict"; | 9487 | "use strict"; |
| 9488 | -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 = \"<span ng-class=\\\"'ant-tag ant-tag-checkable'+(checked==='true'?' ant-tag-checkable-checked':'')\\" ng-click=\\"handleClick()\\" ng-transclude></span>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/CheckableTag/CheckableTag.html?"); | 9488 | +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 = \"<span ng-class=\\\"'ant-tag ant-tag-checkable'+(checked===true?' ant-tag-checkable-checked':'')\\" ng-click=\\"handleClick()\\" ng-transclude></span>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/CheckableTag/CheckableTag.html?"); |
| 9489 | 9489 | ||
| 9490 | /***/ }), | 9490 | /***/ }), |
| 9491 | 9491 |
example/checkable-tag.html
| @@ -9,7 +9,7 @@ | @@ -9,7 +9,7 @@ | ||
| 9 | <body> | 9 | <body> |
| 10 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> | 10 | <div ng-app="esNgAntd" ng-controller="mainCtrl"> |
| 11 | <div class="container" style="padding: 50px"> | 11 | <div class="container" style="padding: 50px"> |
| 12 | - <es-checkable-tag ng-repeat="(key, tag) in tags" checked="{{tag.checked}}" on-change="handleChange(checked, key)">{{tag.label}}</es-checkable-tag> | 12 | + <antd-checkable-tag ng-repeat="(key, tag) in tags" checked="tag.checked" on-change="handleChange(checked, key)">{{tag.label}}</antd-checkable-tag> |
| 13 | </div> | 13 | </div> |
| 14 | </div> | 14 | </div> |
| 15 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> | 15 | <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script> |
src/CheckableTag/CheckableTag.html
| 1 | -<span className={"ant-tag ant-tag-checkable" + (checked === "true" ? " ant-tag-checkable-checked" : "")} onClick={this.handleClick}>{children}</span> | ||
| 2 | \ No newline at end of file | 1 | \ No newline at end of file |
| 2 | +<span className={"ant-tag ant-tag-checkable" + (checked === true ? " ant-tag-checkable-checked" : "")} onClick={this.handleClick}>{children}</span> | ||
| 3 | \ No newline at end of file | 3 | \ No newline at end of file |
src/CheckableTag/CheckableTag.js
| @@ -2,23 +2,25 @@ import template from "./CheckableTag.html"; | @@ -2,23 +2,25 @@ import template from "./CheckableTag.html"; | ||
| 2 | import style from "antd/lib/tag/style/index.css"; | 2 | import style from "antd/lib/tag/style/index.css"; |
| 3 | 3 | ||
| 4 | class CheckableTag { | 4 | class CheckableTag { |
| 5 | - | 5 | + |
| 6 | useModules = ["esNgAntd"]; | 6 | useModules = ["esNgAntd"]; |
| 7 | 7 | ||
| 8 | - template = template; | ||
| 9 | - | ||
| 10 | - props = { | ||
| 11 | - checked: Boolean, | ||
| 12 | - onChange: Function, | 8 | + constructor() { |
| 9 | + esNgAntd.createStyle("ant-tag", style); | ||
| 13 | } | 10 | } |
| 14 | 11 | ||
| 15 | handleClick() { | 12 | handleClick() { |
| 16 | this.props.onChange({ | 13 | this.props.onChange({ |
| 17 | - checked: !(this.props.checked==="true") | ||
| 18 | - }) | 14 | + checked: !(this.props.checked === true), |
| 15 | + }); | ||
| 19 | } | 16 | } |
| 20 | 17 | ||
| 21 | - constructor() { | ||
| 22 | - esNgAntd.createStyle("ant-tag", style); | 18 | + render() { |
| 19 | + return template; | ||
| 23 | } | 20 | } |
| 24 | -} | ||
| 25 | \ No newline at end of file | 21 | \ No newline at end of file |
| 22 | +} | ||
| 23 | + | ||
| 24 | +CheckableTag.propTypes = { | ||
| 25 | + checked: PropTypes.boolean, | ||
| 26 | + onChange: PropTypes.function, | ||
| 27 | +}; |