ionic js model $ ionicModal可以覆盖用户主界面的内容框
离子模型
$ionicModal
$ ionicModal可以覆盖用户主界面的内容框。
您可以将以下代码嵌入到您的索引文件或其他文件中(里面的代码可以根据您自己的业务场景进行更改)。
脚本id=' my-Modal . html ' type=' text/ng-template ' ion-Modal-view ion-header-bar h1 class=' title ' my Modal title/h1/ion-header-barion-content hello!/ion-content/ion-model-view/script,然后您可以将$ ionicModal注入到您的控制器中。然后调用刚刚编写的模板并初始化它。就像下面的代码:
angular.module('testApp ',[' ion '])。控制器(' MyController ',函数($scope,$ ioncmodal){ $ ioncmodal . fromtemplateurl(' my-modal . html ',{scope: $scope,animation: '上滑' })。然后(function(modal){ $ scope . modal=modal;});$ scope . OpenModal=function(){ $ scope . Modal . show();};$ scope . closemodal=function(){ $ scope . modal . hide();};//完成后清理模式!$scope。$on('$destroy ',function(){ $ scope . modal . remove();});//对隐藏模式$作用域执行操作。$on('modal.hidden ',function(){//Execute action });//对移除模式$作用域执行操作。$on('modal.removed ',function(){//Execute action });});方法
从模板(模板字符串,选项)
参数详细信息模板字符串字符串模板字符串作为模型的内容。
选项对象选项将被传递给ionicModal#initialize方法。
返回:对象,它是ionicModal控制器的一个实例。从模板网址(模板网址,选项)
参数详细信息templateUrl字符串加载模板的Url。Options对象通过ionicModal # initialize方法传递对象。返回:一个承诺对象。Promises对象是CommonJS工作组提出的规范,旨在为异步编程提供统一的接口。
离子半导体
由$ionicModal服务实例化。
提示:清除完每个模块后,一定要调用remove()方法以避免内存泄漏。
注意:模块从其初始范围广播“模式.显示”和“模式.隐藏”,并将自身作为参数传递。
方法
初始化(可选)
创建新的模型控制器示例。
参数详细信息选项对象选项对象具有以下属性:{object=}作用域子类的作用域。默认值:创建一个$rootScope的子类。{string=}显示或隐藏动画的动画。默认值:“上滑”{布尔=}第一个输入框获得焦点。显示时,模型的第一个输入元素是否自动获得焦点。默认值:false。{ boolean=} backdropcliktocolose`whether `单击背景时是否关闭模型。默认值:true。显示()
显示模型实例。
返回值为: promise promise对象,在模型动画化后解析。
隐藏()
隐藏模型。
返回值为: promise promise对象,在模型动画化后解析。
移除()
从DOM中移除模型实例并清理它。
返回值为: promise promise对象,在模型动画化后解析。
isShown()
返回:用于确定是否显示模型的布尔值。
例子
HTML代码
html ng-app=' ioncapp ' hearta charset=' utf-8 ' meta name=' viewport ' content=' initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width' title菜鸟教程(runoob。com)/title link鲁诺布。com/static/ion/CSS/ion。量滴CSS ' rel='样式表脚本src=' http :http://www。鲁诺布。com/static/ion/js/ion。捆绑。量滴js '/script/heading-controller=' AppCtrl ' ion-header-bar class=' bar-positive ' h1 class=' title ' contacts/h1 div class=' buttons '代码
正文{光标: URL(' http://www。鲁诺布。com/try/demo _ source/finger。png ')、auto}JavaScript代码
angular.module('ionicApp ',[' Ionical ']).控制器(' AppCtrl ',函数($scope,$ ioncmodal){ $ scope。联系人=[{ name: '戈登弗里曼},{ name : '巴尼克尔霍恩},{ name: ' Lamarr the Headcrab ' },];$ Ionicmodal。FromTemplateURl('模板/模态。html ',{scope: $scope}).然后(函数(模态){ $ scope。模态=模态;});$ scope。create contact=function(u){ $ scope。联系人。push({ name : u .名字' ' u .姓氏});$ scope。莫代尔。hide();};});完整源码:
html ng-app=' ioncapp ' hearta charset=' utf-8 ' meta name=' viewport ' content=' initial-scale=1,maximum-scale=1,user-scaled=no,width=device-width ' title/title link href=' http://cdn。bootscs。com/ion/1。0 .1/CSS/ion。量滴CSS ' rel='样式表脚本src=' http :http://cdn。bootscs。com/ion}/style脚本棱角分明。模块(' Ionicapp ',[' Ionical '].控制器(' AppCtrl ',函数($scope,$ ioncmodal){ $ scope。联系人=[{ name: '戈登弗里曼},{ name : '巴尼克尔霍恩},{ name: ' Lamarr the Headcrab ' },];$ Ionicmodal。FromTemplateURl('模板/模态。html ',{scope: $scope}).然后(函数(模态){ $ scope。模态=模态;});$ scope。create contact=function(u){ $ scope。联系人。push({ name : u .名字' ' u .姓氏});$ scope。莫代尔。hide();};});/script/head body ng-controller=' AppCtrl ' ion-header-bar class=' bar-positive ' h1 class=' title ' contacts/h1 div class=' button ' button class=' button-icon-compose ' ng-click=' modal。show()'/button/div/ion-header-barion-competition-listing-item ng-repeat=' contacts中的联系人{联系人。name } }/ion-item/ion-list/ion-content脚本id=' templates/modal。html ' type=' text/ng-ng
版权声明:ionic js model $ ionicModal可以覆盖用户主界面的内容框是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。