Angularjs 离子模式隐藏不起作用

我试图用爱奥尼亚来显示或隐藏一个模态

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

我在这里的问题是，我设法使.show（）；工作，但是隐藏；事实并非如此。你知道我为什么要面对这个问题吗

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");
   });
 };
});

---

很难确定错误的确切位置，因为我们无法调试http调用，但更好的做法是将finally（）处理程序附加到承诺链的末尾，使其关闭

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

您可能希望通过执行其他操作来处理故障，例如向用户显示某种消息，表示无法联系服务器，等等，但下面是一些有助于解决方案的小片段

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

---

很难确定错误的确切位置，因为我们无法调试http调用，但更好的做法是将finally（）处理程序附加到承诺链的末尾，使其关闭

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

您可能希望通过执行其他操作来处理故障，例如向用户显示某种消息，表示无法联系服务器，等等，但下面是一些有助于解决方案的小片段

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

---

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

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

---

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

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

---

你能在调试模式下看到任何错误吗？完全没有错误。你能把console.log放在var=link下面，但放在$http.post上面，然后在提交时看到它启动吗？我怀疑$scope.submit函数没有启动，因此$scope.modal.hide也没有启动。要了解它是否是您的代码，请尝试在$scope.change中快速测试模态显示的位置，然后隐藏/销毁它自己。这是因为我看到了>console.log（$localStorage.token）；我还添加了：setTimeout（函数（）{$scope.modal.hide（）；}，5000）；对于$scope.change但没有luckAre，您可以在调试模式下看到任何错误吗？完全没有错误。您可以将console.log放在var=link下面，但放在$http.post上面，然后在提交时看到它启动吗？我怀疑$scope.submit函数没有启动，因此$scope.modal.hide也没有启动。要了解它是否是您的代码，请尝试在$scope.change中快速测试模态显示的位置，然后隐藏/销毁它自己。这是因为我看到了>console.log（$localStorage.token）；我还添加了：setTimeout（函数（）{$scope.modal.hide（）；}，5000）；到$scope.change但是没有运气先生只是提供了一个供思考的自助餐！：）我会试试看，我会让你知道我试过你的方法，但问题似乎是。隐藏（）；您可以看到console.log（）；工作正常，因此调用.finally函数。真正奇怪的是我没有犯任何错误。刚才跳过了这一行。请看一下更新的第一个问题，以及显示实际功能的gif。先生，您刚刚提供了一个供思考的自助餐！：）我会试试看，我会让你知道我试过你的方法，但问题似乎是。隐藏（）；您可以看到console.log（）；工作正常，因此调用.finally函数。真正奇怪的是我没有犯任何错误。刚才跳过了这一行。请查看更新的第一个问题以及显示正在运行的函数的gif。