资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Ionic最佳实践-使用模态窗口modal-创新互联

原文地址：Ionic最佳实践-使用模态窗口modal

在中山等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站建设、网站制作 网站设计制作专业公司,公司网站建设,企业网站建设,品牌网站建设,全网整合营销推广,成都外贸网站制作,中山网站建设费用合理。

模态窗口的结构

在Ionic中，模态窗口通过$ionicModal提供。他易于使用且非常强大，详细信息请参考$ionicModal文档。Ionic中的模态窗口可以使用模板字符串或URL创建。本文将使用URL。

模态窗口创建时绑定到一个scope，这个scope可以用来传递数据。然而，在更复杂的情况下，通过服务来访问共享数据是最好的做法。

制作模态窗口的标记

创建模态窗口非常简单。首先，让我们来创建我们的用户界面。这个小例子将会展示一条联系人信息，点击后允许对它进行编辑。


 Contact Info


 
  
   `contact`.`name`
  
      `contact`.`info`   
 

现在，看起来还没有什么特别的，唯一与模态窗口相关的是一个scope函数：openModal()。还缺少我们的modal部分。直接在当前标记中添加它。


  
    
      Edit Contact
    
    
      
        
          Name
          
        
        
          Info
          
        
      
      Done
    
  

在生产环境中，你可能想把模板标记放入独立文件中或把它们添加到模板缓存中。与Ionic中其他使用模板的部分一样，Angular将先从模板缓存中搜索需要的文件。

显示模态窗口

模态窗口的控制器代码非常简单。确保在控制器中注入依赖项$ionicModal。

app.controller('MainCtrl', function($scope, $ionicModal) {
  $scope.contact = {
    name: 'Mittens Cat',
    info: 'Tap anywhere on the card to open the modal'
  }
  $ionicModal.fromTemplateUrl('contact-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal
  }) 
  $scope.openModal = function() {
    $scope.modal.show()
  }
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
})

Ionic的模态窗口使用了一个异步deferred。这样可以异步访问模板缓存和构建模态窗口。我们可以为模态窗口提供一个scope对象，否则他将使用$rootScope。可以为模态窗口的打开动作指定过度动画效果。官方文档中描述了更多过度效果。

一旦模态窗口构建完毕，异步完成函数允许我们设置一个$scope.modal变量。模态窗口有一些函数。在本例中，我们关心show, hide和remove函数。remove函数特别重要。通过监听scope对象的$destroy事件，我们可以确保对模态窗口对象进行垃圾回收。忽略它将会导致你的程序出现内存泄漏。

回顾

模态窗口是一个很强大的用户界面组件，通过Ionic来展现和利用它是一件很轻松的事情。

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。


分享文章：Ionic最佳实践-使用模态窗口modal-创新互联
分享链接：http://cdkjz.cn/article/jcgco.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都雨棚定制高端网站设计教育网站设计方案全网整合营销西云主机托管网络推广平台成都电信服务器托管遂宁海缘科技软文推广公司重庆企业网站建设

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图