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

首先，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

AngularJS Bootstrap 网站还没有更新最新的文档。大约3个月前，pkozlowski-opensource 编写了一个改动，将 $mode 与 $Dialogue commit 分离出来，如下所示:

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

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

要使角形 ui $模式与引导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">&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 -->

打开模式窗口，将数据传递给对话框

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

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

不同的版本类似的一个由马克西姆舒斯汀提供

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

我想将模态的模板放在一个隐藏的 <div>中，并用一个名为 modal_html_template的范围变量绑定内部 html 主要是因为我认为将模板的 html 放在 <div>而不是 <script id="...">中更正确(在 WebStorm/PyCharm 中处理更舒适)

调用 $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();
}
}
});

速战速决！

这不是一个好方法，但对我来说，这似乎是最简单的方法。

添加一个包含模式 data-target 和 data-toggle 的锚标记，并与之关联一个 id。(可以在 html 视图的任何地方添加)

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

现在,

在角度控制器内，从哪里你要触发模式刚刚使用

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

这将模拟一个点击按钮的角度代码和模态将出现。