个人中心
gpt4 book ai didi

javascript - 弹出窗口在phonegap 中的onsen ui 中不起作用

转载 作者：行者123 更新时间：2023-12-03 08:44:29 25 4
gpt4 key购买 nike

你好，我已经在 onsenui 中使用 AngularJS 和 html 制作了一个 PhoneGap 演示的演示，我想制作一个像这样的弹出窗口 popover in onsenui

，我已经按照链接中显示的代码进行操作，但是它不起作用，没有显示弹出窗口，所以任何 friend 可以帮我解决这个问题吗？我的代码是:

索引*

<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
      <script src="lib/onsen/js/platformOverrides.js"></script>

    <script src="scripts/index.js"></script>
    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />
    <!-- --------------- App init --------------- -->
    <title>Onsen UI Sliding Menu</title>
    <script>
        angular.module('app', ['onsen']);
    </script>
    <style>
        .page--menu-page__background {
            background-color: #333;
        }
        .page--menu-page__content {
            color: white;
        }
        .menu-close,
        .menu-close > .toolbar-button {
            color: #999;
        }
        .menu-list,
        .menu-item:first-child,
        .menu-item:last-child,
        .menu-item {
            background-color: transparent;
            background-image: none !important;
            border-color: transparent;
            color: #fff;
        }
        .menu-item {
            padding: 0 0 0 20px;
            line-height: 52px;
            height: 52px;
            text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
        }
            .menu-item:active {
                background-color: rgba(255, 255, 255, 0.1);
            }
        .menu-notification {
            display: inline-block;
            margin-top: 12px;
            font-size: 14px;
            height: 16px;
            line-height: 16px;
            min-width: 16px;
            font-weight: 600;
        }
        .bottom-menu-list,
        .bottom-menu-item:first-child,
        .bottom-menu-item:last-child,
        .bottom-menu-item {
            border-color: #393939;
            background-color: transparent;
            background-image: none !important;
            color: #ccc;
        }
            .bottom-menu-item:active {
                background-color: rgba(255, 255, 255, 0.1);
            }
    </style>
</head>
<body>
<div ng-controller="AppController" class="page">
  <div class="navigation-bar">
    <div class="navigation-bar__left">
      <span id="navigation" ng-click="show('#navigation')" class="toolbar-button--outline navigation-bar__line-height">
        <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
      </span>
    </div>
    <div class="navigation-bar__center">
      Popover 
    </div>
    <div class="navigation-bar__right">
      <span id="top-right" ng-click="show('#top-right')" class="toolbar-button--outline navigation-bar__line-height">Button</span>
    </div>
  </div>
  <div style="text-align: center">
    <br />
    <br />
    <ons-button id="button" ng-click="show('#button')">Click me!</ons-button>
  </div>
  <div class="tab-bar">
    <label ng-click="show('#stop')" class="tab-bar__item">
      <input type="radio" name="tab-bar-b" checked="checked">
      <button id="stop" class="tab-bar__button">
        <i class="tab-bar__icon ion-stop"></i>
      </button>
    </label>
    <label ng-click="show('#record')" class="tab-bar__item">
      <input type="radio" name="tab-bar-b">
      <button id="record" class="tab-bar__button">
        <i class="tab-bar__icon ion-record"></i>
      </button>
    </label>
    <label ng-click="show('#star')" class="tab-bar__item">
      <input type="radio" name="tab-bar-b">
      <button id="star" class="tab-bar__button">
        <i class="tab-bar__icon ion-star"></i>
      </button>
    </label>
    <label ng-click="show('#cloud')" class="tab-bar__item">
      <input type="radio" name="tab-bar-b">
      <button id="cloud" class="tab-bar__button">
        <i class="tab-bar__icon ion-ios-cloud-outline"></i>
      </button>
    </label>
    <label ng-click="show('#pie')" class="tab-bar__item">
      <input type="radio" name="tab-bar-b">
      <button id="pie" class="tab-bar__button">
        <i class="tab-bar__icon ion-ios-pie"></i>
      </button>
    </label>
  </div> 
</div>
<script type="text/ons-template" id="popover.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>This is a popover!</p>
      <p><small>Click the background to remove the popover.</small></p>
    </div>
  </ons-popover>
</script>
</body>
</html>

index.js

  var module = angular.module('app', ['onsen', 'angular-images-loaded', 'ngMap', 'angular-carousel','ngDialog']);
module.controller('AppController', function($scope) {
  ons.createPopover('popover.html').then(function(popover) {
    $scope.popover = popover;
  });

  $scope.show = function(e) {
    $scope.popover.show(e);
  };
});

*

最佳答案

据我所知，ons-popovers 应该在一个模板下。请引用以下代码

HTML

<div class="navigation-bar__right" ng-controller="myPopoverController">
    <ons-icon class="button button--quiet" icon="ion-ios-information-outline" size="20px" fixed-width="false" ng-click="popover.show($event)"></ons-icon>
</div>
<ons-template id="myPopover.html">
    <ons-popover cancelable direction="down">
        <div style="text-align: center;">
            <ons-list>
                <ons-list-item>List 1</ons-list-item>
                <ons-list-item>List 2</ons-list-item>
                <ons-list-item>List 3</ons-list-item>
            </ons-list>
        </div>
    </ons-popover>
</ons-template>

JS

myApp.controller('myPopoverController', function ($scope) {

    ons.createPopover('myPopover.html').then(function (popover) {
        $scope.popover = popover;
    });
});

关于javascript - 弹出窗口在phonegap 中的onsen ui 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32944981/

25 4 0
文章推荐： javascript - 我怎样才能让这个谷歌地图变暗？
文章推荐： javascript - 允许单独的正确答案，测验
文章推荐： javascript - Angular 类型错误: Cannot read property 'icon' of undefined
文章推荐： javascript - 获取 RangeError : using angular. js 和 php
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com