本文主要是介绍onsen UI popover 的用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这是在typeScript下使用的：
1.绑定父级作用域：
$window["ons"].createPopover($scope.popoverUrl, {
parentScope: $scope
}).then(function(popover:any) {
$scope.popover = popover;
// $scope.show(e);
$scope.popover.show(e);
});可以单独建立页面 ，设置控制器；
<ons-template id="popover.html" ng-controller="messageListController">
<ons-popover direction="down up" cancelable cover-target style=" width: 400px">
<ons-list-item ng-repeat="messOne in messageData">
<ons-row style="padding: 10px 10px 0px 30px;">
<ons-col width="60px">
<img ng-src="images/xiaol.png" class="avatar">
</ons-col>
<ons-col ng-click="events.goMessDetail(messOne.infoId)">
<div style="height:auto;line-height:20px;">
<lable sytle="background:red">*</lable>
<strong>标题:知识网上线啦</strong>
<lable class="round-list-date" style="float:right">2016年10月5日</lable>
</div>
<div style="height:auto;line-height:15px;font-size:13px;">
<b> {{messOne.infoTitle}}</b> {{list.course}}
</div>
</ons-col>
</ons-row>
</ons-list-item>
<div style="text-align: center">
<ons-button modifier="quiet" ng-click="events.destroyAlert('popover.html', $event)">查看全部</ons-button>
</div>
</ons-popover>
</ons-template>html 页面的实现
<div class="right" ng-controller="PopoverController"><ons-toolbar-button id="android-share" ng-click="popover.show($event); popurl('popover_share.html')"><ons-icon icon="ion-android-share" fixed-width="false"></ons-icon></ons-toolbar-button><ons-toolbar-button id="android-more" ng-click="popover.show($event); popurl('popover.html')"><ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon></ons-toolbar-button>
</div>
这篇关于onsen UI popover 的用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
