javascript - 改变 ionic 负载

Question

我有服务器端编程背景，所以我对 Angular/Ionic 框架相当陌生。

我正在开发一个小型 Ionic 项目，其中用户需要针对后端数据库对自己进行身份验证(我正在使用 Parse，以供记录)。

当用户点击提交按钮时，当前我正在利用 ionicLoading 模块在屏幕上显示一个小的“旋转器”，以向用户显示正在发生的事情:

$scope.loginEmail = function(){
    $scope.show($ionicLoading);
    Parse.User.logIn($scope.data.username, $scope.data.password, {success: function(user) {

这是在 Controller 中声明的 ionicLoading:

  $scope.show = function() {
    $ionicLoading.show({
      template: '<p>Authenticating...</p><ion-spinner></ion-spinner>'
});
};

我想在整个 Controller 中重复使用 ionicLoading 模块几次(例如，当用户单击“注册”或“通过 Facebook 登录”时) - 甚至在整个应用程序中重复使用几次

是否有一种简单的方法可以根据用户单击的按钮更改"template"以显示不同的内容？

例如:

• 如果用户点击“登录” - 模板可以设置为:

  验证用户身份

• 如果用户点击“使用 Facebook 登录” - 模板可以设置为:

  使用 Facebook 进行身份验证

希望这是有道理的 - 非常感谢任何帮助!

编辑:抱歉 - 上面的“验证用户”和“通过 Facebook 进行验证”应该有段落 P 标签 - 但我正在努力让它们出现在编辑器中!

Answer 1

你可能想尝试这个加载，它将把微调器放在你的应用程序的中间。

Controller :

.directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="img/Preloader_2.gif" /></div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
  })

注意(在绑定(bind)到所选 html View 的 Controller 中使用此选项来启用和禁用微调器(即成功后，更改为 false):

$scope.loading = true;
$scope.loading = false;

HTML:(放入您选择的html)

<loading></loading>

CSS:(将微调器放置在中间)

.loading { position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);z-index: 9999;}

希望有帮助!