草庐IT

ionic 浮动框

runoob 2023-04-07 原文

ionic 浮动框

$ionicPopover

$ionicPopover 是一个可以浮在app内容上的一个视图框。

可以实现以下功能点：

  • 在当前页面显示更多信息。
  • 选择一些工具或配置。
  • 在页面提供一个操作列表。

方法

fromTemplate(templateString, options)
或
fromTemplateUrl(templateUrl, options)

参数说明：

templateString: 模板字符串。

templateUrl: 载入的模板 URL。

options: 初始化选项。

实例

HTML 代码部分

<p> <button ng-click="openPopover($event)">打开浮动框</button> </p> <script id="my-popover.html" type="text/ng-template"> <ion-popover-view> <ion-header-bar> <h1 class="title">我的浮动框标题</h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-popover-view> </script>

fromTemplateUrl 方法

angular.module('ionicApp', ['ionic']) .controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){ $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', { scope: $scope }); // .fromTemplateUrl() 方法 $ionicPopover.fromTemplateUrl('my-popover.html', { scope: $scope }).then(function(popover) { $scope.popover = popover; }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() { $scope.popover.hide(); }; // 清除浮动框 $scope.$on('$destroy', function() { $scope.popover.remove(); }); // 在隐藏浮动框后执行 $scope.$on('popover.hidden', function() { // 执行代码 }); // 移除浮动框后执行 $scope.$on('popover.removed', function() { // 执行代码 }); }])

尝试一下 »

我们也可以把模板当作一个字符串，使用 .fromTemplate() 方法来实现弹框:

fromTemplate 方法

angular.module('ionicApp', ['ionic']) .controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){ $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', { scope: $scope }); // .fromTemplate() 方法 var template = '<ion-popover-view><ion-header-bar> <h1 class="title">我的浮动框标题</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>'; $scope.popover = $ionicPopover.fromTemplate(template, { scope: $scope }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() { $scope.popover.hide(); }; // 清除浮动框 $scope.$on('$destroy', function() { $scope.popover.remove(); }); // 在隐藏浮动框后执行 $scope.$on('popover.hidden', function() { // 执行代码 }); // 移除浮动框后执行 $scope.$on('popover.removed', function() { // 执行代码 }); }])

尝试一下 »
ionic浮动spanclasshl

有关ionic 浮动框的更多相关文章

  1. javascript - 带有 ionic 搜索栏焦点的 ionic 触发模式打开功能 - 单击不起作用 - 2

    我有一个ion-searchbar，单击它会打开一个模式。然而，目前click过程实际上需要两次点击，一次聚焦，一次打开模式。我试图将点击添加到它包含的ion-toolbar中，并尝试使用[disabled]="true"禁用ion-searchbar"，但禁用的功能对ion-searchbar不可用。如何在无需双击的情况下触发新模式打开，并且焦点不会出现在原始搜索栏上？HTMLJSopenSearchModal(){letmyModal=this.modalCtrl.create(SearchmodalPage);myModal.present();} 最

  2. javascript - 从 IONIC 3 的 Assets 文件夹下载 CSV 文件 - 2

    我有一个demo-file.csv文件，它在assets/csv文件夹中，那么如何从手机下载它，这是我的HTML和组件代码。HTML代码DownloadDemoFile组件代码publicdownloadFile(link:any,fileName:any){if(link){letpath=null;this.showWaitingLoading();if(this.platform.is('ios')){path=this.file.documentsDirectory;}else{path=this.file.dataDirectory;}consttransfer=this.t

  3. javascript - ionic 应用程序中的计时器(setInterval)在后台运行一段时间后进入休眠状态 - 2

    我的ionic应用程序有一个计时器(一个简单的setInterval，每秒滴答一次)，当应用程序位于前台时，它工作得很好。然而，当应用程序进入后台并在10分钟后返回前台时，应用程序中显示的时间是错误的(时间比应该的少得多)。我试过将计时器添加到指令中并使用nativeDOM操作api(document.getElementById等)方法，但它们都不起作用。我认为当应用程序进入后台时，ionic框架正在对View和绑定(bind)做一些事情。有没有人遇到过这样的问题？如果遇到过，你们是如何解决的？ 最佳答案 经过几个小时的寻找答案，

  4. javascript - ionic 避免 View 标题在 Android 上闪烁 - 2

    我正在尝试按照ionic模板示例所建议的“标准”方式来制作选项卡内容页面。但是，我发现在Android中切换标签时，view-title会闪烁。您不会在iOS或桌面浏览器上看到闪烁。但是，如果您将Chrome中的设备模式切换到Android设备，您会看到闪烁。我怎样才能克服它？菜单.htmlLeftTab1Content1标签.htmlcontent1.htmlContent1content2.htmlContent2 最佳答案 感谢@AndresRehn分享链接(http://forum.ionicframework.com/t/

  5. javascript - 带 ionic 切换而不是按钮的 ionic 输入插件 - 2

    我非常想合并一个item-input-inset用ion-toggle而不是按钮-因此用户可以选择禁用输入字段。我想要的是这样的:我确实希望将文本输入连接到一个模型，所以我总是有一个NotApplicable变量或用户输入的一些其他字符串(或空字符串)。但我的第一个问题是布局似乎乱七八糟。这是我得到的结果:给出下面乱七八糟的布局 最佳答案 @Norfeldt:请检查下面的代码片段，让我知道您的想法。希望它能像您期望的那样工作。angular.module('ionicApp',['ionic']).controller('MainC

  6. javascript - $scope.$watch in Angular 在 Ionic/Cordova 中不起作用 - 2

    我正在使用IonicFramework构建应用程序我现在想为此创建一些开关(基本上是花哨的复选框)。当有人按下开关时，我想将其发送到服务器，因此我首先trycatch开关更改事件。在基本的Angular安装中，我在html()和$watch中使用一个简单的复选框进行了尝试。在我的Controller中像这样:$scope.$watch('theswitch',function(){console.log('theswitchchanged');if($scope.boel){console.log('theswitchisTRUE');}else{console.log('theswi

  7. javascript - 在 Ionic 2/Angular 2 beta 10 中访问窗口对象 - 2

    在Angular1.x和Ionic1.x中，我可以通过依赖注入(inject)访问窗口对象，如下所示:angular.module('app.utils',[]).factory('LocalStorage',['$window',function($window){return{set:function(key,value){$window.localStorage[key]=value;},get:function(key,defaultValue){return$window.localStorage[key]||defaultValue;}};}]);我如何在Angular2和

  8. javascript - 如何在 Ionic 中的选项卡之间传递数据 - 2

    我有一个包含3个选项卡的简单项目。当用户点击第一个选项卡上某个项目的按钮时，我需要将该项目移动到第二个选项卡，反之亦然。(发生这种情况时，我还需要通知服务器)。有没有什么方法可以将项目对象传递给“关于页面”选项卡中的数组，反之亦然？主页.htmlHome{{item.title}}{{item.name}}|{{item.number}}Details:{{item.text}}TextCallResponderTakeCall首页.tsimport{Component}from'@angular/core';import{NavController}from'ionic-angula

  9. javascript - IOAuth.IO 与 Ionic/Angular 混合应用程序的集成 - 2

    我很难让OAuth.io(https://github.com/oauth-io/oauth-phonegap)编写的cordova插件在ionic手机构建中工作。一切都是基于他们提供的JS文件的桌面版本设置的，包装在Angular服务中以便于单元测试，另一个工厂处理登录/注销等的实际流程......我遇到的问题是，现在切换到插件版本并删除引用的JS版本后，不再有任何工作。我无法再打开facebook登录页面，也无法在注入(inject)服务之外识别全局对象“OAuth”。我在解决问题时得到的最深入的是创建了OAuth对象，至少最初是因为我可以注销该对象，但之后的任何内容似乎都无法识别

  10. javascript - 单元测试 Angular/ ionic 项目 - 2

    我有一个非常简单的Controller，看起来像这样。timeInOut.controller('timeInOutController',function($scope,$filter,$ionicScrollDelegate){...});每当我尝试为它创建一个单元测试时......(function(){'usestrict';varscope,controller,filter;describe('timeInOutController',function(){beforeEach(module('common.directives.kmDateToday'));beforeE

随机推荐