ngModal模态框如何在AngularJS中使用
本篇文章给大家分享的是有关ngModal模态框如何在AngularJS中使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
我们提供的服务有：成都做网站、网站建设、微信公众号开发、网站优化、网站认证、涡阳ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的涡阳网站制作公司
在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');
}
});
