使用JavaScript在AngularJS Bootstrap UI中调用模态窗口
使用这里提到的例子,我怎样才能调用模式窗口使用JavaScript而不是点击一个button?
我是AngularJS的新手,并试图在这里和这里search文档,没有运气。
谢谢
好,首先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
要使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">×</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 -->
将数据传递给对话框打开模态窗口
如果有人有兴趣将数据传递给对话:
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
AngularJS Bootstrap网站尚未更新最新的文档。 大约3个月前,pkozlowski-opensource创build了一个变更,将$ modal从$对话框中分离出来,如下所示:
https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd
在那个提交中他为$ modal添加了新的文档,可以在下面find:
希望这可以帮助!
快速和肮脏的方式!
这不是一个好方法,但对我来说,这似乎是最简单的。
添加一个包含模态数据目标和数据切换的锚点标记,并有一个与之关联的标识。 (可以添加大部分在html视图中的任何地方)
<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>
现在,
在angular度控制器里面,从你想要触发的模式中使用
angular.element('#myModalShower').trigger('click');
这将模仿基于angular码的点击button,模态将出现。
不同于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(); } } });
- 如何在一个页面上至less有两个ui-bootstrapdateselect器?
- angularjs在控制器之间共享数据configuration
- $ watch不会触发数据更改
- Angular引导dateselect器date格式不会格式化ng模型值
- 在Angular UI-Bootstrap中,“解除”模态和“closures”模态有什么区别?
- 你可以覆盖AngularUI Bootstrap中的特定模板?
- 在AngularJS中使用AngularUI Bootstrap Modal的范围问题
- Datepicker不会在angular-ui版本0.11.0中打开两次
- 我应该使用Angular UI Bootstrap还是纯Bootstrap 3?