AngularJS中使用ngModal模态框实例
在AngularJS中使用模态框需要引用的文件:
- angular.js1.5.5
- ui.bootstrap-tpls.js0.11.2
- bootstrap.css3.3.7
需要注意版本要一致,高版本的不支持这种方法,会出错
将需要弹出的模态框的内容写在script标签中,指明属性,放在页面中
标题信息 模态框内容
在AngularJS中使用模态框需要引用的文件:
需要注意版本要一致,高版本的不支持这种方法,会出错
将需要弹出的模态框的内容写在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}}