本篇文章主要介绍了angularjs中使用ngmodal模态框实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在AngularJS中使用模态框需要引用的文件：
angular.js 1.5.5
ui.bootstrap-tpls.js 0.11.2
bootstrap.css 3.3.7
需要注意版本要一致，高版本的不支持这种方法，会出错
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
将需要弹出的模态框的内容写在 script 标签中，指明属性，放在页面中
在App和Controller中注入模态框
var app = angular.module('app', ['ui.bootstrap']);
app.controller('modalController', function($scope, $rootScope,$modal) {
$scope.openModel = 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', function($scope, $modalInstance, data) {
$scope.data= data;
//在这里处理要进行的操作
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
}
});添加事件触发显示模态框
html
ng-model模态框
