0
Привет я сделал демо в onsenui с помощью angularjs и HTML для PhoneGap демо, я хочу сделать поповер, как эта popover in onsenuiпоповер не работает в онсэн uiin PhoneGap
, я follwed код, приведенный в ссылка, но ее не работает, не отображается popover, так может anybuddy PLS помочь мне решить это? мой код:
индекс *
<!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);
};
});
*