时代Java

html 实例源码

Xebcnor

工程师 (已认证)

原创分享签约作者

发表于实例源码

实例源码：

源代码：

执行

执行中...

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>时代Java与您共同学习(NowJava.com)</title>
        <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
        <script type="text/javascript">
        angular.module('ionicApp', ['ionic'])
        .controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){

$scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
            scope: $scope
          });
    			// .fromTemplate() 方法
          var template = '<ion-popover-view><ion-header-bar> <h1 class="title">我的浮动框标题</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';
              $scope.popover = $ionicPopover.fromTemplate(template, {
    				scope: $scope
    			});

$scope.openPopover = function($event) {
            $scope.popover.show($event);
          };
          $scope.closePopover = function() {
            $scope.popover.hide();
          };
          // 清除浮动框
          $scope.$on('$destroy', function() {
            $scope.popover.remove();
          });
          // 在隐藏浮动框后执行
          $scope.$on('popover.hidden', function() {
            // 执行代码
          });
          // 移除浮动框后执行
/**代码未完, 请加载全部代码(NowJava.com).**/

编辑/阅读全部代码

执行结果：

本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。

编辑于 2019-10-10 14:48:352019-10-10 14:48:35

实例源码

实例源码订阅