UI Bootstrap Modal 以编程方式打开答案

【问题标题】：UI Bootstrap Modal open programmaticallyUI Bootstrap Modal 以编程方式打开
【发布时间】：2016-06-16 18:42:07
【问题描述】：

我可以用一个按钮打开我的 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>

【问题讨论】：

$scope.open(<size>);

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

你只需要调用你的控制器。

$scope.open();

您希望模态显示在控制器中的任何位置。

【讨论】：

如果你想运行 sn-p 我可以发帖。如果它有效，请喜欢我的答案:)

【解决方案2】：

我认为这可能有效：

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

这应该会导致控制器在加载时表现得像按钮被点击一样。

【讨论】：

【解决方案3】：

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

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

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

这将简单地模拟一次点击，就像您用鼠标点击一样，然后触发您的功能并打开模式。

【讨论】：