Question

我有一个模态，我希望在关闭后显示成功消息。我的问题是从模态视图控制主视图上的消息。如何在关闭后在另一个视图上显示消息（messageSuccess）？

Plunker ：http://plnkr.co/edit/IrIt4G7HzAoi4uh7euVu?p=preview

模态控制器：这会关闭模态（但如何在关闭后在另一个视图上显示该消息？）

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
    $scope.messageSuccessText = 'Saved!';
    $scope.messageSuccess = true;
  };

主视图上的HTML：

<div class="alert alert-success text-center" data-ng-show="messageSuccess">{{messageSuccessText}}</div>

Answer 1

Modal具有独立的范围，因此您需要使用close方法传递数据：

模态控制：

$scope.ok = function () {
  $modalInstance.close({item: $scope.selected.item, message: 'Saved!'});
};

父Ctrl：

modalInstance.result.then(function (result) {
  $scope.selected = result.item;
  $scope.messageSuccessText = result.message;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

家长Html：

<div class="alert alert-success text-center" data-ng-show="messageSuccessText">{{messageSuccessText}}</div>

Answer 2

您可以使用包含所需数据的对象关闭模态。在这种情况下 messageSuccessText ，关闭模态对话框的处理程序将如下所示：

$scope.ok = function () {
    var modalData = {
      selectedItem: $scope.selected.item,
      messageSuccess: true,
      messageSuccessText: 'Saved!'
    };
    $modalInstance.close(modalData);
};

并在打开模态对话框的控制器中：

modalInstance.result.then(function (modalData) {
    $scope.selected = modalData.selectedItem;
    $scope.messageSuccess = modalData.messageSuccess;
    $scope.messageSuccessText =  modalData.messageSuccessText;
}, function () {
    $log.info('Modal dismissed at: ' + new Date());
});

这是您更新的Plunker。

在主页上关闭模态和显示消息

2 个答案: