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

使用这里提到的例子，我怎样才能调用模式窗口使用JavaScript而不是点击一个button？

我是AngularJS的新手，并试图在这里和这里search文档，没有运气。

谢谢

Answer 1

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

不同之处在于，使用<modal>指令将模态内容embedded主模板（触发模态窗口的模板）。 $dialog服务更加灵活，允许你从单独的文件中加载模态的内容，也可以从AngularJS代码（这是一个控制器，一个服务或其他指令）的任何地方触发模态窗口。

不确定你的意思是“使用JavaScript代码”，但是假设你指的是AngularJS代码中的任何地方， $dialog服务可能是一种方法。

这是非常容易使用和最简单的forms，你可以写：

 $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

要使angular度ui $模态与引导程序3一起工作，您需要覆盖样式

 .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创build了一个变更，将$ modal从$对话框中分离出来，如下所示：

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

在那个提交中他为$ modal添加了新的文档，可以在下面find：

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度控制器里面，从你想要触发的模式中使用

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

这将模仿基于angular码的点击button，模态将出现。

Answer 6

不同于Maxim Shoustin提供的版本

我喜欢这个答案，但是困扰我的部分是使用<script id="...">作为模板模板的容器。

我想将模式的模板放在一个隐藏的<div> ，并将内部html与一个名为modal_html_template的范围variablesmodal_html_template主要是因为我认为它更正确（在WebStorm / PyCharm中处理更加舒适），将模板的html放在<div>而不是<script id="...">

调用$modal({... 'template': $scope.modal_html_template, ...})时会使用这个variables$modal({... 'template': $scope.modal_html_template, ...})

为了绑定内部的html，我创build了一个简单的指令inner-html-bind

检查示例 plunker

 <div ng-controller="ModalDemoCtrl"> <div inner-html-bind inner-html="modal_html_template" class="hidden"> <div class="modal-header"> <h3>I'm a modal!</h3> </div> <div class="modal-body"> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div> </div> <button class="btn" ng-click="open()">Open me!</button> <div ng-show="selected">Selection from a modal: {{ selected }}</div> </div> 

inner-html-bind指令：

 app.directive('innerHtmlBind', function() { return { restrict: 'A', scope: { inner_html: '=innerHtml' }, link: function(scope, element, attrs) { scope.inner_html = element.html(); } } });