Javascript popover无法在onsen ui中使用angularjs
我已经在onsenui上做了一个演示,我需要使用一个popover,在这里,我已经在onsen ui中搜索并找到了对popover的支持,所以我已经按照下面链接中的步骤进行了尝试 htmlJavascript popover无法在onsen ui中使用angularjs,javascript,angularjs,onsen-ui,Javascript,Angularjs,Onsen Ui,我已经在onsenui上做了一个演示,我需要使用一个popover,在这里,我已经在onsen ui中搜索并找到了对popover的支持,所以我已经按照下面链接中的步骤进行了尝试 html <ons-page ng-controller="listingController"> <ons-toolbar style="background: #da1e3e;"> <div class="left"> <ons-back-butt
<ons-page ng-controller="listingController">
<ons-toolbar style="background: #da1e3e;">
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Listing</div>
<div class="right">
<span class="toolbar-button--quiet navigation-bar__line-height" ng-click="gallery.pushPage('filter.html');" style="border: none; padding: 0 0 4px 0;">
<i class="ion-android-options" style="font-size:24px; color: #FFFFFF;"></i>
</span>
<!-- <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="toggleModal('Success')" >-->
<span class="toolbar-button--quiet navigation-bar__line-height" ng-click="show('#navigation')" >-->
<i class="ion-android-more-vertical" style="font-size:26px;"></i>
</span>
<modal visible="showModal" >
<ul>
<h4 align="left">Featured</h4>
<h4 align="left">Name(A-Z)</h4>
<h4 align="left">Rating</h4>
<h4 align="left">Most Popular</h4>
</ul>
</modal>
</div>
</ons-toolbar>
<div class="app-page" >
<div class="list-wrap">
<ons-list class="list ons-list-inner list--categories" modifier="categories">
<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>
</ons-list>
</div>
</div>
</ons-page>
<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>
但它不工作,在控制台中说“TypeError:href为null”,我的代码如下所示,
html
<ons-page ng-controller="listingController">
<ons-toolbar style="background: #da1e3e;">
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Listing</div>
<div class="right">
<span class="toolbar-button--quiet navigation-bar__line-height" ng-click="gallery.pushPage('filter.html');" style="border: none; padding: 0 0 4px 0;">
<i class="ion-android-options" style="font-size:24px; color: #FFFFFF;"></i>
</span>
<!-- <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="toggleModal('Success')" >-->
<span class="toolbar-button--quiet navigation-bar__line-height" ng-click="show('#navigation')" >-->
<i class="ion-android-more-vertical" style="font-size:26px;"></i>
</span>
<modal visible="showModal" >
<ul>
<h4 align="left">Featured</h4>
<h4 align="left">Name(A-Z)</h4>
<h4 align="left">Rating</h4>
<h4 align="left">Most Popular</h4>
</ul>
</modal>
</div>
</ons-toolbar>
<div class="app-page" >
<div class="list-wrap">
<ons-list class="list ons-list-inner list--categories" modifier="categories">
<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>
</ons-list>
</div>
</div>
</ons-page>
<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>
请帮我保存..谢谢据我所知,Popover应该在一个模板下。请参考以下代码 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>
myApp.controller('myPopoverController', function ($scope) {
ons.createPopover('myPopover.html').then(function (popover) {
$scope.popover = popover;
});
});