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

__EOF__

本文作者：Jun10ng
本文链接：https://www.cnblogs.com/wangzun/p/6649922.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！