使用此处提到的示例,如何使用JavaScript而不是单击按钮来调用模式窗口?
我是AngularJS的新手,并尝试在这里和这里搜索文档,但是没有运气。
谢谢
Answers:
好的,因此,首先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
为了使角ui $ modal与bootstrap 3一起使用,您需要覆盖样式
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
(如果使用自定义指令,则最后一个是必需的),并使用
<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
$scope.opts.resolve.item = function()
?
resolve:{ item: function(){return ..} }
AngularJS Bootstrap网站尚未使用最新文档进行更新。大约3个月前,pkozlowski-opensource编写了一项更改,以将$ modal与$ dialog提交分开:
https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd
在该提交中,他添加了有关$ modal的新文档,可以在下面找到:
希望这可以帮助!
这不是一个好方法,但对我来说,这似乎是最简单的。
添加一个包含模态数据目标和数据切换的锚标记,并具有与之关联的ID。(几乎可以添加到html视图中的任何位置)
<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>
现在,
在角度控制器内部,您要从其触发模态的位置即可使用
angular.element('#myModalShower').trigger('click');
这将根据角度代码模拟单击按钮,然后将出现模态。
我喜欢这个答案,但令我困扰的部分是将其<script id="...">
用作模态模板的容器。
我想将模式的模板放置在隐藏的位置,<div>
并用一个范围变量来绑定内部html,这modal_html_template
主要是因为我认为将模板的html放置在a中<div>
而不是更正确(在WebStorm / PyCharm中处理更舒适)。<script id="...">
调用时将使用此变量 $modal({... 'template': $scope.modal_html_template, ...})
为了绑定内部html,我创建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();
}
}
});