\r\n\r\n<div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">Modal from embedded template<\/div>\r\n <div class=\"panel-body\">\r\n <div>\r\n <button class=\"btn btn-default\" ng-click=\"open('sm')\">Small modal<\/button>\r\n <button class=\"btn btn-default\" ng-click=\"open('lg')\">Large modal<\/button>\r\n <div ng-show=\"selected != null\">Selected: {{ selected }}<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n\r\n\r\nlibrary WpDartExample.modalemb;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_ui\/angular_ui.dart';\r\n\r\n@Component(\r\n selector: 'modalemb-demo', \r\n useShadowDom: false,\r\n templateUrl: 'modalemb_demo.html',\r\n exportExpressions: const [\"tmp\", \"ok\"]\r\n)\r\nclass ModalembDemoComponent implements ScopeAware {\r\n List<String> items = [\"item1\", \"item2\", \"item3\", \"item4\"];\r\n String selected;\r\n String tmp;\r\n \r\n Modal modal;\r\n ModalInstance modalInstance;\r\n Scope scope;\r\n \r\n String template = \"\"\"\r\n<div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×<\/button>\r\n <h4 class=\"modal-title\">I'm a modal!<\/h4>\r\n<\/div>\r\n<div class=\"modal-body\">\r\n <ul>\r\n <li ng-repeat=\"item in items\">\r\n <a ng-click=\"tmp = item\">{{ item }}<\/a>\r\n <\/li>\r\n <\/ul>\r\n Selected: <b>{{tmp}}<\/b>\r\n<\/div>\r\n<div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\r\n <button type=\"button\" class=\"btn btn-primary\" ng-click=\"ok(tmp)\">OK<\/button>\r\n<\/div>\r\n\"\"\";\r\n \r\nModalembDemoComponent(this.modal);\r\n \r\n ModalInstance getModalInstance(size) {\r\n return modal.open(new ModalOptions(template:template,size:size), scope);\r\n }\r\n \r\n void open(size) {\r\n modalInstance = getModalInstance(size);\r\n \r\n modalInstance.opened\r\n ..then((v) {\r\n print('Opened');\r\n }, onError: (e) {\r\n print('Open error is $e');\r\n });\r\n modalInstance.close = (result) { \r\n selected = result;\r\n print('Closed with selection $selected');\r\n modal.hide();\r\n };\r\n modalInstance.dismiss = (String reason) { \r\n print('Dismissed with $reason');\r\n modal.hide();\r\n };\r\n }\r\n \r\n void ok(sel) {\r\n modalInstance.close(sel);\r\n }\r\n}\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n browser: '>=0.10.0+2 <0.11.0'\r\n web_components: \">=0.10.1 <0.11.0\"\r\n angular: '>=1.1.0 <2.0.0'\r\n angular_ui: '>=0.6.8 <0.7.0'\r\ntransformers:\r\n- angular:\r\n html_files:\r\n - lib\/component\/modalemb_demo.html\r\n - lib\/component\/accordion_demo.html\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n
\r\n6. Modal(external)<\/H3>
\r\n\r\n\r\n<\/modalext-demo>\r\n<\/tab>\r\n\r\n\r\n\r\n<script type=\"text\/ng-template\" id=\"template_2.html\">\r\n<div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×<\/button>\r\n <h4 class=\"modal-title\">I'm a modal!<\/h4>\r\n<\/div>\r\n<div class=\"modal-body\">\r\n <ul>\r\n <li ng-repeat=\"item in items\">\r\n <a ng-click=\"tmp = item\">{{ item }}<\/a>\r\n <\/li>\r\n <\/ul>\r\n Selected: <b>{{tmp}}<\/b><br>\r\n<\/div>\r\n<div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\r\n <button type=\"button\" class=\"btn btn-primary\" ng-click=\"ok(tmp)\">OK<\/button>\r\n<\/div>\r\n<\/script>\r\n\r\n<div class=\"panel panel-default\">\r\n <div class=\"panel-heading\">Modal from template page<\/div>\r\n <div class=\"panel-body\">\r\n <div>\r\n <button class=\"btn btn-default\" ng-click=\"openUrl('template_2.html','sm')\">Small modal<\/button>\r\n <button class=\"btn btn-default\" ng-click=\"openUrl('template_2.html','lg')\">Large modal<\/button>\r\n <div ng-show=\"selected != null\">Selected: {{ selected }}<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n\r\n\r\nlibrary WpDartExample.modalext;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_ui\/angular_ui.dart';\r\n\r\n@Component(\r\n selector: 'modalext-demo', \r\n useShadowDom: false,\r\n templateUrl: 'modalext_demo.html',\r\n exportExpressions: const [\"tmp\", \"ok\"]\r\n)\r\nclass ModalextDemoComponent implements ScopeAware {\r\n List items = [\"Java\", \"Dart\", \"JavaScript\", \"Ruby\"];\r\n \r\n String selected;\r\n String tmp;\r\n String other;\r\n \r\n Modal modal;\r\n ModalInstance modalInstance;\r\n Scope scope;\r\n \r\n ModalextDemoComponent(this.modal) {\r\n }\r\n \r\n void openUrl(String templateUrl, String size) {\r\n modalInstance = modal.open(new ModalOptions(templateUrl:templateUrl, size: size), scope);\r\n \r\n modalInstance.result\r\n ..then((value) {\r\n selected = value;\r\n print('Closed with selection $value');\r\n }, onError:(e) {\r\n print('Dismissed with $e');\r\n });\r\n }\r\n \r\n void ok(sel) {\r\n modalInstance.close(sel);\r\n }\r\n}\r\n<\/pre><\/div>\r\n<\/tab>\r\n\r\n\r\n\r\n(css)\r\n[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{\r\n display: none !important;\r\n}\r\n\r\n(pubspec.yaml)\r\ndependencies:\r\n browser: '>=0.10.0+2 <0.11.0'\r\n web_components: \">=0.10.1 <0.11.0\"\r\n angular: '>=1.1.0 <2.0.0'\r\n angular_ui: '>=0.6.8 <0.7.0'\r\ntransformers:\r\n- angular:\r\n html_files:\r\n - lib\/component\/modalext_demo.html\r\n - lib\/component\/accordion_demo.html\r\n<\/pre>\r\n<\/tab>\r\n<\/tabset>\r\n
\r\n7. datepicker<\/H3>
\r\n<\/datepick-demo>\r\n
\r\n