ionic模态框

最新推荐文章于 2024-02-11 07:00:00 发布

qq_31182399

最新推荐文章于 2024-02-11 07:00:00 发布

阅读量391

点赞数

文章标签： angular javascript

本文链接：https://blog.csdn.net/qq_31182399/article/details/107707681

版权

  .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {//注入$ionicPopup,
	 $scope.showPopup = function() {
	           $scope.data = {}

           // 自定义弹窗
           var myPopup = $ionicPopup.show({
             template: '<input type="password" ng-model="data.wifi">',
             title: 'Enter Wi-Fi Password',
             subTitle: 'Please use normal things',
             scope: $scope,
             buttons: [
               { text: 'Cancel' },
               {
                 text: '<b>Save</b>',
                 type: 'button-positive',
                 onTap: function(e) {
                   if (!$scope.data.wifi) {
                     // 不允许用户关闭，除非输入 wifi 密码
                     e.preventDefault();
                   } else {
                     return $scope.data.wifi;
                   }
                 }
               },
             ]
           });
           myPopup.then(function(res) {
             console.log('Tapped!', res);
           });
           $timeout(function() {
              myPopup.close(); // 3秒后关闭弹窗
           }, 3000);
          };
           //  confirm 对话框
           $scope.showConfirm = function() {
             var confirmPopup = $ionicPopup.confirm({
               title: 'Consume Ice Cream',
               template: 'Are you sure you want to eat this ice cream?',
				 buttons: [
               { text: '取消' },
               {
                 text: '<b>确认</b>',
                  type: 'button-positive',
               },
             ]
             });
             confirmPopup.then(function(res) {
               if(res) {
                 console.log('You are sure');
               } else {
                 console.log('You are not sure');
               }
             });
           };

           //  alert（警告） 对话框
           $scope.showAlert = function() {
             var alertPopup = $ionicPopup.alert({
               title: 'Don\'t eat that!',
               template: 'It might taste good'
             });
             alertPopup.then(function(res) {
               console.log('Thank you for not eating my delicious ice cream cone');
             });
           };
        });
        //model 框
          $ionicModal.fromTemplateUrl('modal.html', {
	        scope: $scope,
	        animation: 'slide-in-up'
		    }).then(function (modal) {
		        $scope.modal = modal;
		    });
		    $scope.openUser = function (item) {
		        $scope.fixboxshow = true;
		        $scope.userName = item.xyname;
		        $scope.userCompany = item.zw;
		        $scope.userPhone = item.sjhm;
		        $scope.modal.show();
		    }
		    $scope.closeAll = function () {
		        $scope.fixboxshow = false;
		        $scope.modal.hide();
		    }
		    //当我们用完模型时，清除它！
		    $scope.$on('$destroy', function () {
		        $scope.modal.remove();
		    });
      <script id="modal.html" type="text/ng-template">
		    <div class="fixdiv">
		        <div id="appraisal">
		            <div class="description">
		                <p class="item">姓名:</p>
		                <p class="item">{{userName}}</p>
		            </div>
		            <div class="hr"></div>
		            <div class="description">
		                <p class="item">工作单位及职务:</p>
		                <p class="item">{{userCompany}}</p>
		            </div>
		            <div class="hr"></div>
		            <div class="description">
		                <p class="item">电话:</p>
		                <p class="item">{{userPhone}}</p>
		            </div>
		        </div>
		    </div>
		</script>
    </head>
    <body class="padding" ng-controller="PopupCtrl">
      <button class="button button-dark" ng-click="showPopup()">
        弹窗显示
      </button>
      <button class="button button-primary" ng-click="showConfirm()">
        确认对话框
      </button>
      <button class="button button-positive" ng-click="showAlert()">
        警告框
      </button>

      <script id="popup-template.html" type="text/ng-template">
        <input ng-model="data.wifi" type="text" placeholder="Password">
      </script>
  	</body>