微客导航 » 文章资讯 » AngularJS中使用ngModal模态框实例

AngularJS中使用ngModal模态框实例

2024-02-21 21:14:03 291

在AngularJS中使用模态框需要引用的文件：

angular.js1.5.5
ui.bootstrap-tpls.js0.11.2
bootstrap.css3.3.7

需要注意版本要一致，高版本的不支持这种方法，会出错

将需要弹出的模态框的内容写在script标签中，指明属性，放在页面中





标题信息




模态框内容

确认退出

在App和Controller中注入模态框

varapp=angular.module('app',['ui.bootstrap']);
app.controller('modalController',function($scope,$rootScope,$modal){
$scope.openModel=function(){
varmodalInstance=$modal.open({
templateUrl:'modal.html',//script标签中定义的id
controller:'modalCtrl',//modal对应的Controller
resolve:{
data:function(){//data作为modal的controller传入的参数
returndata;//用于传递数据
}
}
})
}
}

//模态框对应的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}}

确认退出 varapp=angular.module('app',['ui.bootstrap']); app.controller('modalController',function($scope,$rootScope,$modal){ vardata="通过modal传递的数据"; $scope.openModal=function(){ varmodalInstance=$modal.open({ templateUrl:'modal.html',//script标签中定义的id controller:'modalCtrl',//modal对应的Controller resolve:{ data:function(){//data作为modal的controller传入的参数 returndata;//用于传递数据 } } }) } }) //模态框对应的Controller app.controller('modalCtrl',function($scope,$modalInstance,data){ $scope.data=data; //在这里处理要进行的操作 $scope.ok=function(){ $modalInstance.close(); }; $scope.cancel=function(){ $modalInstance.dismiss('cancel'); } });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

AngularJS中使用ngModal模态框实例

热门推荐

随机推荐