离子模态隐藏不起作用答案

【问题标题】：Ionic Modal hide not working离子模态隐藏不起作用
【发布时间】：2017-03-10 01:30:27
【问题描述】：

我正在尝试使用 Ionic 以某种方式显示或隐藏模式。

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

我的问题是我设法制作了 .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");
   });
 };
});

【问题讨论】：

在调试模式下你能看到任何错误吗？
完全没有错误
你能不能在 var=link 下面但在 $http.post 上面放一个 console.log 并看到它在提交时触发？我怀疑您的 $scope.submit 函数没有触发，因此 $scope.modal.hide 也没有触发。要了解它是否是您的代码，请尝试在 $scope.change 中快速测试模态显示的位置，然后隐藏/销毁自身。
它确实是因为我看到了 >console.log($localStorage.token);
我还添加了：setTimeout(function() { $scope.modal.hide(); }, 5000);到 $scope.change 但没有运气

标签： angularjs ionic-framework

【解决方案1】：

很难确定错误的确切位置，因为我们无法调试 http 调用，但最好将 finally() 处理程序附加到您的 Promise 链的末尾以便它关闭。

问题在于，如果 http 调用失败（这是必然的，因为您可能随时丢失网络/信号），您的模态将永远不会关闭。在 finally 中关闭它保证它会关闭，无论 http 调用是否成功。

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

$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!
});

【讨论】：

你先生刚刚给了一个深思熟虑的自助餐！ :) 我会试一试，我会告诉你的
我试过你的方法，但问题似乎是 .hide();如您所见，console.log();有效，因此调用了 .finally 函数。真正奇怪的是我没有收到任何错误。该行被跳过了。
查看第一个问题以获取更新以及显示正在运行的功能的 gif。

【解决方案2】：

我不知道如何以及为什么，但这里的代码解决了这个问题。我现在可以毫无问题地使用 .show()、.hide() 函数。如果您有任何想法，请随时分享您的想法。

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

【讨论】：