AngularJS中使用ngModal模态框实例

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

1. angular.js 1.5.5
2. ui.bootstrap-tpls.js 0.11.2
3. bootstrap.css 3.3.7

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

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

rush:js;">

在App和Controller中注入模态框

rush:js;"> 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',$modalinstance,data) {
$scope.data= data;

//在这里处理要进行的操作
$scope.ok = function() {
$modalinstance.close();
};
$scope.cancel = function() {
$modalinstance.dismiss('cancel');
}
});

添加事件触发显示模态框

rush:xhtml;">

html

rush:xhtml;"> nofollow" rel="stylesheet">

<script type="text/ng-template" id="modal.html">

标题信息

内容
{{data}}

退出