模态,使用解析绑定传递的变量

Modal, variables passed using resolve binding

我有以下指令

angular.module('ui.bootstrap.demo').directive('warningDirective',function() {
  return {
    restrict: 'EA',
    scope: {
      showwarning: '=',
      warningmessage: '=',
    },
    controller: function ($scope, $uibModal, $element) {
      $scope.$watch('showwarning', function (newVal, oldVal) {
        if (angular.isDefined(newVal)  && newVal != oldVal && newVal) {
          $scope.open();
        }
      });
      $scope.open = function () {
        var modalInstance = $uibModal.open({
          templateUrl: 'warningModal.html',
          resolve: {
            warningMessage: function() {
              return $scope.warningmessage;
            },
            showWarning: function() {
              return $scope.showwarning;
            }
          },
          windowClass: 'warning-modal',
          controller: function ($scope, $modalInstance, warningMessage, showWarning) {
            $scope.warningMessage = warningMessage;
            $scope.showWarning = showWarning;
            $scope.confirmWarning = function () {
              //action here
              $scope.showWarning = false;
              $modalInstance.dismiss('cancel');
            }
            $scope.closeModal = function () {
              $scope.showWarning = false;
              $modalInstance.dismiss('cancel');
            }
          }
        });
      }
    }
  }
})

这是一个可重复使用的指令,用于显示模态警告(稍后我将传递一个 yes 动作函数)。在指令中,我正在观察范围变量 showwarning,何时显示弹出窗口。当用户关闭模式或单击是时,我使用 resolve 传递它并将其设置为 false

我的问题是它没有得到更新。稍后当我在控制器中将 showwarning 设置为 true 时,它不会触发手表,因为 showwarning 仍然是 true

这里是a plunker.

模态只会显示一次

你只需要在模式关闭时将 showwarning 更改为 false。

DEMO

$scope.open = function() {
  var modalInstance = $uibModal.open({
    // modal options
  });

  // set showwarning to false
  modalInstance.result.finally(function() {
    $scope.showwarning = false;
  });

};