将弹出窗口添加到您的 Appery.io Ionic 应用程序

使用浏览器的 alert() 是测试某些东西的快速方法，但它不会创造良好的用户体验。这是标准浏览器警报的样子：

标准浏览器警报

这看起来不太好。另外，总是有“<site> 上的页面说：”。有一个更好的选择，那就是使用漂亮的 Ionic Popup。这是它的外观（好多了）：

离子弹出窗口

这个弹出窗口可以通过 CSS 自定义——太好了！

我将向您展示如何将此弹出窗口添加到您的 Ionic 应用程序。

1. 打开现有应用程序或创建新的 Ionic 应用程序。
2. 打开要添加弹出窗口的页面并切换到 Scope 视图。
   • Scope 视图是为此页面自动创建的 Angular 控制器。这意味着您不需要创建控制器，App Builder 已经为您创建了一个。
3. 创建一个名为 showPopup 作用域函数，然后单击 Add 以添加该函数。
4. 输入以下代码：

   
    // inject Ionic popup
   var $ionicPopup = Apperyio.get("$ionicPopup");
   var alertPopup = $ionicPopup.alert({
      title: 'Really?',
      template: "My dog ate my HW."
   });
   alertPopup.then(function(res) {
      console.log("OK.. popup closed. Good.");
   });
   

   • 第 2 行：将 Ionic Popup 注入到函数中
   • 第 3 行：您设置要在弹出窗口中显示的内容
   • 第 7 行：可选地，您可以在弹出窗口关闭时执行某些操作
5. 还有一件事要做，那就是调用函数。返回 Design 视图。
6. 选择按钮，然后在 ng-click 的 Properties 视图中，单击 Ctrl-space 以激活代码辅助。然后从列表中选择函数。您甚至不需要键入名称，只需从列表中选择即可。这非常有用，因为它可以减少错误。

   角度代码辅助

7. 你完成了。现在单击工具栏中的 Test 以测试弹出窗口。

如果您喜欢 Ionic 并希望通过 Appery.io 加速您的开发，请立即 注册一个开发者帐户 。