如何在用戶在Angular中提交表單後顯示感謝信息？

Question

我在角使這個片斷：http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview

$scope.loadEditForm = function() { 
    $scope.checkItem = "yes"; 
    $modal.open({ 
     templateUrl: 'modal.html', 
     controller: 'modalController', 
     scope: $scope 
    }) 
    .result.then(function() { 
     alert('closed'); 
    }); 
}; 

正如你所看到的，我提示一個「關閉」彈出，但我想使這個更時尚，並在顯示模式的消息，而不必顯示一個顯示「關閉」的醜陋彈出屏幕。

我怎麼能在Angular中做到這一點？有沒有一些漂亮的技巧？

Answer 1

您可以使用消息中的$scope定義的function更新modal's state的值，然後使用setTimeout關閉它。您可以查看我的updated Plunker。

ModalController

angular.module('myModule').controller('modalController', function($scope) { 
    $scope.state = 'open'; 

    $scope.closeModal = shouldDismiss => { 
     $scope.state = shouldDismiss ? 'canceled' : 'closed'; 

     setTimeout(() => { 
     if (shouldDismiss) { 
      return $scope.$dismiss(); 
     } 

     $scope.$close(); 
     }, 500); 
    }; 
}); 

您可以更改時間在setTimeout設置爲顯示modal更長。

主控制器

angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "$modal", function ($rootScope, $scope, $filter, $modal) { 

    $scope.checkItem = ""; 

    $scope.loadEditForm = function() { 
     $scope.checkItem = "yes"; 
     $modal.open({ 
      templateUrl: 'modal.html', 
      controller: 'modalController', 
      scope: $scope 
     }).result.then(); 
    }; 
}]); 

添加.result.then()觸發時modal正在關閉動畫。

Answer 2

您可以擁有一項服務並定義以下引導模式功能。 template =「你的模態存在的URL」。並顯示使用showThankYouCtrl

  $uibModal.open({ 
      animation: true, 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      template: template, 
      size: 'md', 
      controller: function ($uibModalInstance) { 
       this.data = "Thank you!"; 
       this.cancel = function() { 
       $uibModalInstance.dismiss('cancel'); 
       }; 
       this.ok = function() { 
       $uibModalInstance.dismiss('cancel'); 
       }; 
      }, 
      controllerAs: '$showThankYouCtrl' 
      });