弹出窗口在angularjs的onsen UI中不起作用

popover not working in onsen ui with angularjs

本文关键字：onsen UI 不起作用 angularjs 窗口      更新时间：2023-09-26

我已经在onsenui上做了一个演示，我需要使用弹出窗口在这，我已经搜索并找到了一个支持在onsenui本身的弹出窗口，所以我已经尝试按照下面的步骤链接，在onsenui弹出窗口

，但它不工作，说"TypeError: href is null"在控制台中，我的代码如下， 

<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>

js 

ons.createPopover('popover.html').then(function(popover) {
    $scope.popover = 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>

JS 

myApp.controller('myPopoverController', function ($scope) {
    ons.createPopover('myPopover.html').then(function (popover) {
        $scope.popover = popover;
    });
});
相关文章：