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

您可以使用function中定义的$scope来更新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会触发动画。

如果有人在Angular中提交表单后如何显示感谢信息？

2 个答案: