使用JavaScript在AngularJS Bootstrap UI中调用模态窗口

Question

使用此处提到的示例,如何使用JavaScript而不是单击按钮来调用模态窗口？

我是AngularJS的新手,试图在这里和这里搜索文档,但没有运气.

谢谢

Answer 1

好的,首先http://angular-ui.github.io/bootstrap/有一个<modal>指令和$dialog服务,这两个都可以用来打开模态窗口.

不同之处在于,<modal>模态的指令内容嵌入在托管模板中(触发模态窗口打开的模板).该$dialog服务更灵活,允许您从单独的文件加载模态的内容,以及从AngularJS代码中的任何位置触发模态窗口(这是一个控制器,一个服务或另一个指令).

不确定你的意思是"使用JavaScript代码",但假设你的意思是AngularJS代码中的任何地方,$dialog服务可能是一种方法.

它非常易于使用,并且以最简单的形式可以编写:

$dialog.dialog({}).open('modalContent.html');  

为了说明它可以被任何JavaScript代码真正触发,这里是一个触发带有定时器的模态的版本,在实例化控制器3秒后:

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

这可以在这个插件中看到:http ://plnkr.co/edit/u9HHaRlHnko492WDtmRU? p= preview

最后,这里是$dialog这里描述的服务的完整参考文档:https: //github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Answer 2

要使用bootstrap 3进行角度ui $ modal工作,您需要覆盖样式

.modal {
    display: block;
}
.modal-body:before,
.modal-body:after {
    display: table;
    content: " ";
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}

(如果你使用自定义指令,最后一个是必要的)并用html封装

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Answer 3

打开模态窗口,将数据传递给对话框

如果有人有兴趣将数据传递给对话框:

app.controller('ModalCtrl', function($scope,  $modal) {

      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {

        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };


        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }

          var modalInstance = $modal.open($scope.opts);

          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {

     $scope.item = item;

      $scope.ok = function () {
        $modalInstance.close();
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}

演示 Plunker

Answer 4

AngularJS Bootstrap网站尚未更新最新文档.大约3个月前pkozlowski-opensource撰写了一个更改,将$ modal从$ dialog commit中分离出来,如下所示:

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

在该提交中,他为$ modal添加了新文档,可以在下面找到:

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md.

希望这可以帮助!

Answer 5

快速而肮脏的方式!

这不是一个好方法,但对我来说它似乎是最简单的.

添加一个包含模态数据目标和数据切换的锚标记,并具有与之关联的标识.(可以在html视图中的任何位置添加)

<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>

现在,

在角度控制器内部,您想从哪里触发模态只需使用

angular.element('#myModalShower').trigger('click');

这将基于角度代码模仿对按钮的单击,并且将出现模态.