ngModal模态框如何在AngularJS中使用-创新互联
本篇文章给大家分享的是有关ngModal模态框如何在AngularJS中使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
目前
创新互联建站已为成百上千的企业提供了网站建设、域名、虚拟空间、
网站托管运营、企业网站设计、
黄陵网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
在AngularJS中使用模态框需要引用的文件：
angular.js 1.5.5
ui.bootstrap-tpls.js 0.11.2
bootstrap.css 3.3.7
需要注意版本要一致，高版本的不支持这种方法，会出错
将需要弹出的模态框的内容写在 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模态框
打开模态框
模态框内容
{{data}}
确认
退出
var app = angular.module('app', ['ui.bootstrap']);
app.controller('modalController', function($scope, $rootScope, $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', function($scope, $modalInstance, data) {
$scope.data= data;
//在这里处理要进行的操作
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
}
});
