您的位置:首页 > 产品设计 > UI/UE

onsen UI popover 的用法

2016-09-06 11:24 567 查看
这是在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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: