onsen UI popover 的用法
2016-09-06 11:24
567 查看
这是在typeScript下使用的:
1.绑定父级作用域:
可以单独建立页面 ,设置控制器;
html 页面的实现
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 button-bar的用法尝试
- 【学习ios之路:UI系列】NSPredicate相关用法
- IOS UIProgressView 用法
- androidUI第四部分---1.4.2ListView用法—利用SimpleAdapter生成ListView
- UI -- UIScrollView用法
- Android UI控件----ExpandableListView的基本用法
- angularjs中ng-route和ui-router简单用法的代码比较
- Swift - 进度条(UIProgressView)的用法
- Android UI学习|自定义布局中的平滑移动|VelocityTracker()速度追踪器的用法
- iOS 中 UIApplication基本用法
- org.eclipse.ui.decorators得用法
- UIPickerView基本用法
- UIGestureRecognizer 六种手势的用法 - iOS - UI基础知识总结6
- UI 经常用法总结之--- UIWindow UIView (不断更新中)
- UIDeviceOrientation 和 UIInterfaceOrientation 设备旋转的用法 (实例)
- UI手势的基本用法
- UI中的表视图用法
- DockPanel_2.4 WeifenLuo.WinFormsUI.Docking.dll的用法
- UIPickView用法
- IOS UI Label的一些用法