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>