在AngularJS中使用模态框需要引用的文件：
- angular.js 1.5.5
- ui.bootstrap-tpls.js 0.11.2
- bootstrap.css 3.3.7
将需要弹出的模态框的内容写在 script 标签中，指明属性，放在页面中
在App和Controller中注入模态框
//模态框对应的Controller
app.controller('modalCtrl',$modalinstance,data) {
$scope.data= data;
//在这里处理要进行的操作
$scope.ok = function() {
$modalinstance.close();
};
$scope.cancel = function() {
$modalinstance.dismiss('cancel');
}
});
html
<script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.min.js">
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js">
<script type="text/javascript">
var app = angular.module('app',['ui.bootstrap']);
app.controller('modalController',$modal) {
var data = "通过modal传递的数据";
$scope.openModal = function() {
var modalinstance = $modal.open({
templateUrl : 'modal.html',//script标签中定义的id
controller : 'modalCtrl',//modal对应的Controller
resolve : {
data : function() {//data作为modal的controller传入的参数
return data;//用于传递数据
}
}
})
}
})
//模态框对应的Controller
app.controller('modalCtrl',data) {
$scope.data= data;
//<a href="https://www.jb51.cc/tag/zaizheli/" target="_blank" class="keywords">在这里</a>处理要进行的操作
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.ok = function() {
$mo<a href="https://www.jb51.cc/tag/dali/" target="_blank" class="keywords">dali</a>nstance.close();
};
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.cancel = function() {
$mo<a href="https://www.jb51.cc/tag/dali/" target="_blank" class="keywords">dali</a>nstance.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>miss('cancel');
}});