关于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属性。