Question

我有服务器端编程的背景，所以我对Angular / Ionic框架还不熟悉。

我正在进行一个小型的Ionic项目，用户需要针对后端数据库进行身份验证（我正在使用Parse作为记录）。

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

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

这是在控制器中声明的ionicLoading：

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

我想在整个控制器中重复使用ionicLoading模块几次（例如，当用户点击“注册”或“使用Facebook登录”时） - 甚至整个应用程序中的几次

是否有一种简单的方法可以更改“模板”以显示不同的内容，具体取决于用户点击了哪个按钮？

例如：

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

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

使用Facebook验证

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

编辑：道歉 - 上面的“认证用户”和“使用Facebook认证”应该有段落P标签 - 但我很难让它们出现在编辑器中！

Answer 1

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

控制器：

.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();
              });
        }
      }
  })

注意（在你的控制器中使用它绑定到你选择的html视图来启用和禁用微调器（即成功后，改为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;}

希望有所帮助！

改变ionicLoading

1 个答案: