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

巴特西

关于angularjs的model的一些问题

HTML

JS

最新文章

热门文章