HTML
<button class="button icon-center ion-images button-outline button-calm"style="border-color:#12B7F5;color:#12B7F5;" ng-click="showModal1()"> 照片 </button>
modal-view
<ion-modal-view > <ion-header-bar class="bar bar-header bar-positive" id="mview"> <h1 class="title">上传照片预览</h1> <button class="button button-clear button-primary" ng-click="hideModal1()">关闭</button> </ion-header-bar> <ion-content class="padding"> <div class="list card"> <div class="item item-avatar"> <img src="images/logo.jpg" /> <h2 style="color:#676767;">市北高新</h2> <p>案件编号:6107223</p> </div> <div class="item item-body"> <img src="images/bg.png" style="height:250px; 100%;"> <p> <a class="subdued">时间:2016-11-8 14:53</a> </p> </div> </div> <button class="button button-block button-positive" style="background-color:#12B7F5;letter-spacing: 10px;margin-top: 30px;"> 删除 </button> </ion-content> </ion-modal-view>
JS
//定义开启弹窗的方法 photo $scope.showModal1 = function () { if ($scope.modal) { $scope.modal.show(); //如果弹窗已经存在,直接显示 } else { $ionicModal.fromTemplateUrl('templates/ajsb/photo.html', { scope: $scope }).then(function (modal) { $scope.model=modal; $scope.model.show(); }); } }; $scope.hideModal1 = function () { $scope.model.hide(); }; //当前视图被销毁后,同时从内容中移除弹窗 $scope.$on('$destroy', function() { $scope.modal.remove(); });
引入 $ionicModal