Question

我试图以某种方式使用Ionic显示或隐藏模态。

我想当用户调用submit时，接受处理后的输入，然后模态应该关闭。如果输入被拒绝，则再次显示模态以及消息。

我的问题是我设法制作.show（）;工作，但.hide（）;不是。任何想法为什么我面临这个问题？

app.controller('AppCtrl', function($scope, $localStorage, $http, $ionicModal) {
    $scope.data = {};

    $scope.change = function() {
   // Do Stuff here

      $ionicModal.fromTemplateUrl('templates/modal.html', {
          scope: $scope,
          animation: 'slide-in-up'
      }).then(function(modal) {
          $scope.modal = modal;
      });

      if ($localStorage.value == true) {
        console.log("Modal will pop up");
        $scope.modal.show(); //it works
      }
      else{
        console.log("Unregistered device");
      }

    console.log($localStorage.value);
  }

    $scope.submit = function(){
      var link = 'http://example.com/api.php';

      //HERE I TRIED TO DECLARE THE MODAL AGAIN JUST IN CASE IT WORKS BUT NO LUCK
      //$ionicModal.fromTemplateUrl('templates/modal.html', {
      //    scope: $scope,
      //    animation: 'slide-in-up'
      //}).then(function(modal) {
      //    $scope.modal = modal;
      //});

      $http.post(link, {username : $scope.data.username, password: $scope.data.password}).then(function (res){
          $scope.response = res.data;
          $localStorage.token = res.data;
          console.log($localStorage.token);
          $scope.modal.hide(); //Not working
      });
    };


});

更新

app.controller('AppCtrl', function($scope, $localStorage, $http, $ionicModal, $timeout) {
 $scope.data = {};

 $scope.change = function() {
  $localStorage.value = !$localStorage.value;
  $scope.value = $localStorage.value;

  $ionicModal.fromTemplateUrl('templates/modal.html', {
   scope: $scope,
   animation: 'slide-in-up'
  }).then(function(modal) {
   $scope.modal = modal;
  });

  if ($localStorage.value == true) {
   console.log("Modal will pop up");
   $scope.modal.show();
   setTimeout(function() {
    $scope.modal.hide();
   }, 5000);
  } else {
   console.log("Unregister device");
  }

  console.log($localStorage.value);
 }

 $scope.submit = function() {
  var link = 'http://app.example.com/api.php';

  $ionicModal.fromTemplateUrl('templates/modal.html', {
   scope: $scope,
   animation: 'slide-in-up'
  }).then(function(modal) {
   $scope.modal = modal;
  });

  $http.post(link, {
    username: $scope.data.username,
    password: $scope.data.password
   }).then(function(res) {
    $scope.response = res.data;
    $localStorage.token = res.data;
    console.log($localStorage.token);
   })
   .catch(function(error) {
    console.error(error);
   })
   .finally(function() {
    $scope.modal.hide(); // this will execute no matter what happens with the http call!
    console.log("Finally Function");
   });
 };
});

Answer 1

很难确定错误的确切位置，因为我们无法调试http调用但是将finally（）处理程序附加到promise链的末尾以便关闭它会更好。

问题在于，如果http调用失败（由于您可能随时丢失网络/信号，它必然会这样做），您的模式将永远不会关闭。无论http呼叫是否成功，关闭它都可以保证它将关闭。

您可能希望通过执行其他操作来处理故障，例如向用户显示某种消息，说明无法联系服务器等，但这里有一些可以帮助该方案的片段。

$http.post(link, {username : $scope.data.username, password: $scope.data.password})
.then(function (res){
    $scope.response = res.data;
    $localStorage.token = res.data;
})
.catch(function (error) {
    console.error(error);
})
.finally(function () {
    $scope.modal.hide(); // this will execute no matter what happens with the http call!
});

Answer 2

我不知道如何以及为什么，但这里的代码解决了这个问题。我现在可以使用.show（）,. hide（）函数而不会出现任何问题。如果您有任何想法，请随时分享您的想法。

 $ionicModal.fromTemplateUrl('templates/modal.html', function(modal) {
    $scope.modal = modal;
  }, {
    animation: 'slide-in-up',
    focusFirstInput: true
  });

离子莫代尔隐藏不起作用

2 个答案: