{"id":745,"date":"2018-02-25T20:33:20","date_gmt":"2018-02-25T12:33:20","guid":{"rendered":"http:\/\/60.205.208.74\/2018\/02\/25\/ionic-%e6%a8%a1%e6%80%81%e7%aa%97%e5%8f%a3\/"},"modified":"2018-02-25T20:33:20","modified_gmt":"2018-02-25T12:33:20","slug":"ionic-%e6%a8%a1%e6%80%81%e7%aa%97%e5%8f%a3","status":"publish","type":"post","link":"https:\/\/www.puzi7.net\/?p=745","title":{"rendered":"ionic \u6a21\u6001\u7a97\u53e3"},"content":{"rendered":"
\n
\n

ionic \u6a21\u6001\u7a97\u53e3<\/h1>\n
\n

$ionicModal<\/h2>\n

$ionicModal \u53ef\u4ee5\u906e\u4f4f\u7528\u6237\u4e3b\u754c\u9762\u7684\u5185\u5bb9\u6846\u3002<\/p>\n

\u4f60\u53ef\u4ee5\u5728\u4f60\u7684 index \u6587\u4ef6\u6216\u8005\u662f\u5176\u4ed6\u6587\u4ef6\u5185\u5d4c\u5165\u4ee5\u4e0b\u4ee3\u7801(\u91cc\u9762\u7684\u4ee3\u7801\u53ef\u4ee5\u6839\u636e\u4f60\u81ea\u5df1\u7684\u4e1a\u52a1\u573a\u666f\u76f8\u5e94\u7684\u6539\u53d8)\u3002<\/p>\n

\n<script id=\"my-modal.html\" type=\"text\/ng-template\">\n  <ion-modal-view>\n    <ion-header-bar>\n      <h1 class=\"title\">My Modal title<\/h1>\n    <\/ion-header-bar>\n    <ion-content>\n      Hello!\n    <\/ion-content>\n  <\/ion-modal-view>\n<\/script>\n<\/pre>\n
\n\u7136\u540e\u4f60\u5c31\u53ef\u4ee5\u5728\u4f60\u7684 Controller \u91cc\u9762\u7684\u6ce8\u5165 $ionicModal \u3002\u7136\u540e\u8c03\u7528\u4f60\u521a\u521a\u5199\u5165\u7684\u6a21\u677f\uff0c\u8fdb\u884c\u521d\u59cb\u5316\u64cd\u4f5c\u3002\u5c31\u50cf\u4e0b\u9762\u7684\u4ee3\u7801\uff1a\n<\/p>\n
\nangular.module('testApp', ['ionic'])\n.controller('MyController', function($scope, $ionicModal) {\n  $ionicModal.fromTemplateUrl('my-modal.html', {\n    scope: $scope,\n    animation: 'slide-in-up'\n  }).then(function(modal) {\n    $scope.modal = modal;\n  });\n  $scope.openModal = function() {\n    $scope.modal.show();\n  };\n  $scope.closeModal = function() {\n    $scope.modal.hide();\n  };\n  \/\/Cleanup the modal when we're done with it!\n  $scope.$on('$destroy', function() {\n    $scope.modal.remove();\n  });\n  \/\/ Execute action on hide modal\n  $scope.$on('modal.hidden', function() {\n    \/\/ Execute action\n  });\n  \/\/ Execute action on remove modal\n  $scope.$on('modal.removed', function() {\n    \/\/ Execute action\n  });\n});\n<\/pre>\n
\u65b9\u6cd5<\/h3>\n
\nfromTemplate(templateString, options)\n<\/pre>\n\n\n\n\n\n\n
\u53c2\u6570<\/th>\n\u7c7b\u578b<\/th>\n\u8be6\u60c5<\/th>\n<\/tr>\n<\/thead>\n
\n        templateString\n      <\/td>\n\n
  \u5b57\u7b26\u4e32<\/code>\n      <\/td>\n
\n
\u6a21\u677f\u7684\u5b57\u7b26\u4e32\u4f5c\u4e3a\u6a21\u6001\u7a97\u53e3\u7684\u5185\u5bb9\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        options<\/p>\n<\/td>\n\n
  \u5bf9\u8c61<\/code>\n      <\/td>\n
\n
options \u4f1a\u4f20\u9012\u5230 ionicModal#initialize\u65b9\u6cd5\u4e2d\u3002<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u8fd4\u56de:<\/b> \u5bf9\u8c61, \u4e00\u4e2aionicModal\u63a7\u5236\u5668\u7684\u5b9e\u4f8b\u3002<\/p>\n
\nfromTemplateUrl(templateUrl, options)\n<\/pre>\n\n\n\n\n\n\n
\u53c2\u6570<\/th>\n\u7c7b\u578b<\/th>\n\u8be6\u60c5<\/th>\n<\/tr>\n<\/thead>\n
\n        templateUrl\n      <\/td>\n\n
  \u5b57\u7b26\u4e32<\/code>\n      <\/td>\n
\n
\u8f7d\u5165\u6a21\u677f\u7684url\u3002<\/p>\n<\/td>\n<\/tr>\n
\n        options<\/p>\n<\/td>\n\n
  \u5bf9\u8c61<\/code>\n      <\/td>\n
\n
\u901a\u8fc7ionicModal#initialize\u65b9\u6cd5\u4f20\u9012\u5bf9\u8c61\u3002<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u8fd4\u56de\uff1a<\/b> promise\u5bf9\u8c61\u3002Promises\u5bf9\u8c61\u662fCommonJS\u5de5\u4f5c\u7ec4\u63d0\u51fa\u7684\u4e00\u79cd\u89c4\u8303\uff0c\u76ee\u7684\u662f\u4e3a\u5f02\u6b65\u7f16\u7a0b\u63d0\u4f9b\u7edf\u4e00\u63a5\u53e3\u3002<\/p>\n
\n
ionicModal<\/h2>\n
\u7531$ionicModal\u670d\u52a1\u5b9e\u4f8b\u5316\u3002\n<\/p>\n
\n\u63d0\u793a\uff1a\u5f53\u4f60\u5b8c\u6210\u6bcf\u4e2a\u6a21\u5757\u6e05\u9664\u65f6\uff0c\u786e\u4fdd\u8c03\u7528remove()\u65b9\u6cd5\uff0c\u4ee5\u907f\u514d\u5185\u5b58\u6cc4\u6f0f\u3002\n<\/p>\n
\n\u6ce8\u610f\uff1a\u4e00\u4e2a\u6a21\u5757\u4ece\u5b83\u7684\u521d\u59cb\u8303\u56f4\u5e7f\u64ad\u51fa ‘modal.shown’ \u548c ‘modal.hidden’ \uff0c\u628a\u81ea\u8eab\u4f5c\u4e3a\u4e00\u4e2a\u53c2\u6570\u6765\u4f20\u9012\u3002<\/p>\n<\/p>\n
\u65b9\u6cd5<\/h3>\n
\ninitialize(\u53ef\u9009)<\/pre>\n
\n\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u6a21\u6001\u7a97\u53e3\u63a7\u5236\u5668\u793a\u4f8b\u3002\n<\/p>\n\n\n\n\n\n
\u53c2\u6570<\/th>\n\u7c7b\u578b<\/th>\n\u8be6\u60c5<\/th>\n<\/tr>\n<\/thead>\n
\n        options\n      <\/td>\n\n
  \u5bf9\u8c61<\/code>\n      <\/td>\n
\n
\u4e00\u4e2a\u9009\u9879\u5bf9\u8c61\u5177\u6709\u4e00\u4e0b\u5c5e\u6027\uff1a<\/p>\n