angular模态框位置_angular $modal 模态框

引入了angular-ui-bootstrap插件

Document

大

中

小

设置了3个按钮 大的模态框，中的和小的。对应着bootstrap 中的modal样式

在另一个HTML配置弹出来的对话框模板 如下：

//分为头部

title

//身体

• {{item}}

当前选择： {{selected.item}}

// 底部

OK

cancel

最关键的script 部分

angular.module('app',['ui.bootstrap']).controller('myModal',function ($scope,$modal) {

$scope.items = ['h5', 'c3', 'js'];

$scope.open = function (size) {

var modalInstance = $modal.open({

templateUrl: 'modal.html', //指向上面创建的视图

controller: 'Ctrl',// 初始化模态范围 对应着下面Controller

size: size, //大小配置 size是变量，根据open里面参数

resolve: {

items: function () {

return $scope.items;

}

}

})

}

})

.controller('Ctrl',function ($scope,$modalInstance,items) {

$scope.items = items; 对话框里面显示items数组的参数

})

亲测，可用