在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;
//在这里处理要进行的操作
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
}});