关于angularjs的model的一些问题

有的时候 在一些页面中 我们会需要用到弹出的模态框，这里主要是使用angularjs的uimodel。

页面效果如下：



首先我们需要在JS的controller中导入$uibModal模块。

HTML

<div>
<button class="btn"  ng-click="openModel(photoId)">打开模态</button>

<script type="text/ng-template" id="addPhoto.html">
<div class="modal-header">
<h3 class="modal-title">图片展示</h3>
</div>
<div class="modal-body">
<img ng-src="{{photoUrl}}" style="max-width:500px;max-height:500px;margin:0 auto;display:block;" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">
{{'help.ok' | translate}}
</button>
<button class="btn btn-warning" ng-click="cancel()">{{'help.cancel' | translate}}</button>
</div>
</script>

</div>

JS

myapp.controller('xxxCtrl', function ($scope, $state, $http, $stateParams,$uibModal) {
//打开模态的按钮事件
$scope.openModel=function(photoId){

var modalInstance = $uibModal.open({

templateUrl : 'addPhoto.html',
controller : 'addPhotoContrl',
//模态的尺寸
size : 'lg',
//传递的参数
resolve : {
photoId: function(){
return photoId;
}
}
})
//关闭模态执行的事件
modalInstance.result.then(function () {

xxxxx;
});

}

})
myapp.controller('addPhotoContrl', function ($scope, $state, $http, $stateParams,$uibModalInstance,photoId) {

//获取图片url photoId是作为参数传递进来的
$http.get('getPhotoUrl'+photoId)
.success(function(data){
$scope.photoUrl=data;
})

$scope.ok = function () {
//关闭模态并且执行事件
$uibModalInstance.close();
};
$scope.cancel = function () {
//只关闭模态
$uibModalInstance.dismiss('cancel');
};
})

PS:

有的 时候模态框会根据数据长度变长 导致在一个页面内看不全所有的模态框信息，这个时候就需要给模态框加上滚动条。

如图：



如此需要在 class modal-body 后加入css:

.addoverflow{
overflow-y: scroll;
height: 450px;
}

如此就加入垂直的滚动条，水平的滚动条同理可以加入。 使用overflow-x属性。