I have created a demo using Onsen UI and I am trying to incorporate a popover into it. After researching, I found that there is built-in support for popovers in Onsen UI itself. I followed the steps outlined in the link below: Onsen UI Popover
HTML
However, when I implemented it, I encountered an error saying "TypeError: href is null" in the console. My code snippet is as follows:
<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>
JavaScript (JS)
ons.createPopover('popover.html').then(function(popover) {
$scope.popover = popover;
});
Please assist me in resolving this issue. Thank you.