有人在Angular中提交表單后如何顯示感謝消息？

Question

我已經在Angular中制作了以下代碼段： 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

您可以擁有服務並定義以下引導程序模態函數。 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'
          });

Answer 2

您可以使用$scope定義的function來更新modal's state的值，然后使用setTimeout將其關閉。

您可以檢查我更新的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();
    };
}]);

當modal關閉時，添加.result.then()會觸發動畫。