Question

我可以用按钮打开我的UI Bootstrap Modal但是如何在我的Ctrl中以编程方式打开它？

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

JS：

  // open modal if this is true
  $scope.openModal = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

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

HTML：

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        Modal body
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>

Answer 1

您只需要在控制器中打电话。

$ scope.open（）;

您希望模型在控制器中显示的位置。

Answer 2

我认为这可行：

angular.element('#myModalContent.html').trigger('click');

这应该会导致控制器像加载时点击按钮一样动作。

Answer 3

由于您只是在点击时触发$scope.open(size)，您可以随时随地调用该功能，正如Saurabh已经提到的那样。

或者，如果您想在该按钮上触发“真实点击事件”，则可以使用angular.element。代码的工作示例可能看起来像这样：

angular.element('#your_button_id').triggerHandler('click');

这只是模仿一次点击，就像你用鼠标点击一样，然后触发你的功能并打开模态。

UI Bootstrap Modal以编程方式打开

3 个答案: