码迷,mamicode.com
首页 > 其他好文 > 详细

Ionic 常见问题及解决方案 -----转

时间:2017-06-20 13:38:20      阅读:358      评论:0      收藏:0      [点我收藏+]

标签:ssi   location   分页   ng-model   rms   sign   contact   混淆   word   


原文网址:http://mclspace.com/2016/01/16/ionic-problems-and-solutions/

前言

Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案。


一些常识与技巧

    • ion-content处使用 <i>上用<label>标签内的事件会在整个style=""
    • 能用ng-if,ng-showion-list中的ng-click事件,可以在item中的元素上再套一层div
    • 可以用$filterid : 4,应写成 var id = InfoListService.getListLength()+1+"";
    • 使用$log而不是console.log呢?可以看看ionic集成的crosswalk
    • services 的文件名可能会重合,但是他们意义差不多,可以将services中的文件名大写进行区分,或者加后缀xxxService
    • 安装cordova插件的时候用package.json中添加这个插件的条目,如果有人clone了你的项目想在本地运行,可以用cordovaPlugins条目安装对应的插件。如果直接用package.json
    • 上传base64编码的时候如果提示413错误,是因为文件过大导致的,可以在nodejs中设置bodyparser的文件限制:

      var bodyParser = require(‘body-parser‘);
      app.use(bodyParser.json({limit: ‘50mb‘}));
      app.use(bodyParser.urlencoded({limit: ‘50mb‘, extended: true}));
      
    • img 中 base64编码的图片无法显示?在源码中发现angular添加了unsafe标签?需要在白名单中添加

      $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):|data:image\//);
      
    • 有时候pm2运行有问题,重启一下即可

    • 在ios设备上运行

      问题列表

    • 如何在ionic中加载本地图片?
    • 如何将template加载到某个tab或某个sidemenu项目下?
    • 用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?
    • 更新了数据,如何让界面更新呢?
    • controller.js和service.js文件越来越大怎么办?
    • 如何显示相对时间?
    • 如何在列表右下方添加时间等信息?
    • 如何关闭应用?
    • 如何让在sidemenu中的headerbar能够显示头像等其他信息?
    • 对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?
    • ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
      1. 如何在某个界面中去掉导航栏?

        如果某个界面上不想要导航栏,可以简单地在最顶端的标签中添加

        如何在ionic中加载本地图片?

        对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如../,否则在浏览器中可以正常显示,在设备上不行,结构如下所示:

        .login-page {
          background:url(../img/signup_bg.png);
          background-size: cover;
          background-repeat: no-repeat;
        }
        

        但是对于在页面中定义的图片路径,从

        
        

         


        如何在ionic中嵌入网页代码?

        使用$sce模块,用

        如何将template加载到某个tab或某个sidemenu项目下?

         可以指定name,ionic就知道该把该状态的template渲染到哪边了。例如:

        
        

        运行serve命令时ionic报错?

        看看你是不还有一个终端在运行着serve呢?

         


        用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?

        可以用

        加载页面的时候会看到双括号一闪而过?

        AngularJS 在使用双括号的时候,第一个加载的页面,也就是应用中的ng-bind就不会遇到这个问题。造成这种现象的原因是,浏览器需要首先加载HTML页面,渲染它,然后ng-bind

        <p ng-bind="greeting"></p>


        更新了数据,如何让界面更新呢?

        可以用广播,注意

        如何实现IonicView中card上面有一列分割线的效果?

        在css里定义

        #info-up {
          border-top: 4px solid #f06336;
        }
        

         


        controller.js和service.js文件越来越大怎么办?

        所有的控制器不必都放在controllers.js这一个文件中,可以新建controllers文件夹,
        然后把每个controller都建一个.js文件,同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖,第一个加载的js中模块中要加[…],其他都不需要。如:

        // File : /js/directives/mainDirective.js
        angular.module(‘app.directives‘,[]);
        
        // File : /js/directives/myGreatDirective.js
        angular.module(‘app.directives‘)  
            .directive(‘myGreatDirective‘, function(){
                return {
                    //...
                }
            });
        
        // File : /js/directives/myBetterDirective.js
        angular.module(‘app.directives‘)  
            .directive(‘myBetterDirective‘, function(){
                return {
                    //...
                }
            });
        
        ...
        

        angular.module(‘fcws.controllers‘,[‘ionic‘, ‘fcws.services‘]);
        angular.module(‘fcws.services‘, []);
        

        可以达到和上面一样的效果,而且可以统一管理.


        如何寻找优秀的范例代码?

        目前有些ionic 的app没有进行代码混淆,至少ionic官方的ionic view没有进行代码混淆,下载他们的app,文件名改成zip,解压,所有的 www文件都在assets文件夹中,相当于开源了有木有,看看那些最优秀的practice。看中哪些优秀的app,下下来,如何在googleplay上下载?把googleplay应用的地址贴到

        如何显示相对时间?

        如几分钟前,几天前等,这篇教程


        发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?

        暂时的解决方法是,不进行翻译校正, 在 /platforms/Android/build.gradle 中的android {}节中加入:

         


        如何在列表右下方添加时间等信息?

        span 可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:

        
        

         


        如何回到上一页面?

        goBack([backCount]),backCount指定回去多少个页面(-1代表回去一个页面),默认为-1


        如何关闭应用?

        ionic.Platform.exitApp();
        

        在安卓设备上如何让title居中?

        在headerbar中添加

         

        不过这个设置对ion-view无效,亲测,如果要统一让所有navbar上的title居中(包括上面的headerbar),可以在config里设置,如:

        .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
          $ionicConfigProvider.navBar.alignTitle(‘center‘);
          ...
        

        如果要让某一个view title居中,可以用ionic官方文档


        如何让在sidemenu中的headerbar能够显示头像等其他信息?

        解决方案是去掉headerbar,添加一个avatar到sidemenu content中,如:

         

         


        ionic的subheader挡住了内容区域怎么办?

        解决方案是给has-subheader,同理也可以加

        
        

        对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?

        可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖


        ionic如何处理回退按钮?例如询问用户是否真的要退出应用

        可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件,除去有二级历史页面的我单独判断了下,注意增加依赖。

        $ionicPlatform.registerBackButtonAction(function(e) {
            var current_state_name = $state.current.name;
            if(current_state_name !== ‘sidemenu.post‘
             && current_state_name !== ‘sidemenu.contact_town‘ &&
            current_state_name !== ‘sidemenu.contact_people‘){
                $ionicPopup.confirm({
                    title: ‘退出应用‘,
                    template: ‘您确定要退出xxxx吗?‘
                }).then(function (res) {
                    if (res) {
                        //ionic.Platform.exitApp();
                        navigator.app.exitApp();
                    } else {
                        console.log(‘You are not sure‘);
                    }
                });
                e.preventDefault();
                return false;
            }else{
                navigator.app.backHistory();
            }
        },100);
        

         


        ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?

        在应用的注册或者登录部分,不记名token被存储到本地存储中。当你向后端请求一个服务时,你需要把这个app.jsangularjs的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应403,跳转到重新登录页面.

        $httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
            return {
                ‘request‘: function (config) {
                    config.headers = config.headers || {};
                    if (User.getToken()) {
                        config.headers.Authorization = ‘Bearer ‘ + User.getToken();
                    }
                    return config;
                },
                ‘responseError‘: function (response) {
                    if (response.status === 401 || response.status === 403) {
                        //如果之前登陆过
                        if (User.getToken()) {
                            $rootScope.$broadcast(‘unAuthenticed‘);
                        }
                    }
                    return $q.reject(response);
                }
            };
        });
        

         


        ionic如何实现搜索框内的全部清除按钮?

        在label中的input不能嵌入按钮,因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框,注意ng-model需要是一个对象才能置空,变量不行:

         

        前言

        Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案。


        一些常识与技巧

        • ion-content处使用 <i>上用<label>标签内的事件会在整个style=""
        • 能用ng-if,ng-showion-list中的ng-click事件,可以在item中的元素上再套一层div
        • 可以用$filterid : 4,应写成 var id = InfoListService.getListLength()+1+"";
        • 使用$log而不是console.log呢?可以看看ionic集成的crosswalk
        • services 的文件名可能会重合,但是他们意义差不多,可以将services中的文件名大写进行区分,或者加后缀xxxService
        • 安装cordova插件的时候用package.json中添加这个插件的条目,如果有人clone了你的项目想在本地运行,可以用cordovaPlugins条目安装对应的插件。如果直接用package.json
        • 上传base64编码的时候如果提示413错误,是因为文件过大导致的,可以在nodejs中设置bodyparser的文件限制:

          var bodyParser = require(‘body-parser‘);
          app.use(bodyParser.json({limit: ‘50mb‘}));
          app.use(bodyParser.urlencoded({limit: ‘50mb‘, extended: true}));
          
        • img 中 base64编码的图片无法显示?在源码中发现angular添加了unsafe标签?需要在白名单中添加

          $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):|data:image\//);
          
        • 有时候pm2运行有问题,重启一下即可

        • 在ios设备上运行

          问题列表

          1. 如何在ionic中加载本地图片?
          2. 如何将template加载到某个tab或某个sidemenu项目下?
          3. 用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?
          4. 更新了数据,如何让界面更新呢?
          5. controller.js和service.js文件越来越大怎么办?
          6. 如何显示相对时间?
          7. 如何在列表右下方添加时间等信息?
          8. 如何关闭应用?
          9. 如何让在sidemenu中的headerbar能够显示头像等其他信息?
          10. 对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?
          11. ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
          12. 如何在某个界面中去掉导航栏?

            如果某个界面上不想要导航栏,可以简单地在最顶端的标签中添加

            如何在ionic中加载本地图片?

            对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如../,否则在浏览器中可以正常显示,在设备上不行,结构如下所示:

            .login-page {
              background:url(../img/signup_bg.png);
              background-size: cover;
              background-repeat: no-repeat;
            }
            

            但是对于在页面中定义的图片路径,从

            
            

             


            如何在ionic中嵌入网页代码?

            使用$sce模块,用

            如何将template加载到某个tab或某个sidemenu项目下?

             可以指定name,ionic就知道该把该状态的template渲染到哪边了。例如:

            
            

            运行serve命令时ionic报错?

            看看你是不还有一个终端在运行着serve呢?

             


            用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?

            可以用

            加载页面的时候会看到双括号一闪而过?

            index.html,其未被渲染好的模版可能会被用户看到。用Angular才有机会把它解释成你期望看到的内容。不过好消息是,在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作,建议使用 <p ng-bind="greeting"></p>


            更新了数据,如何让界面更新呢?

            可以用广播,注意

            如何实现IonicView中card上面有一列分割线的效果?

            在css里定义

            #info-up {
              border-top: 4px solid #f06336;
            }
            

             


            controller.js和service.js文件越来越大怎么办?

            所有的控制器不必都放在controllers.js这一个文件中,可以新建controllers文件夹,
            然后把每个controller都建一个.js文件,同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖,第一个加载的js中模块中要加[…],其他都不需要。如:

            // File : /js/directives/mainDirective.js
            angular.module(‘app.directives‘,[]);
            
            // File : /js/directives/myGreatDirective.js
            angular.module(‘app.directives‘)  
                .directive(‘myGreatDirective‘, function(){
                    return {
                        //...
                    }
                });
            
            // File : /js/directives/myBetterDirective.js
            angular.module(‘app.directives‘)  
                .directive(‘myBetterDirective‘, function(){
                    return {
                        //...
                    }
                });
            
            ...
            

            angular.module(‘fcws.controllers‘,[‘ionic‘, ‘fcws.services‘]);
            angular.module(‘fcws.services‘, []);
            

            可以达到和上面一样的效果,而且可以统一管理.


            如何寻找优秀的范例代码?

            目前有些ionic 的app没有进行代码混淆,至少ionic官方的ionic view没有进行代码混淆,下载他们的app,文件名改成zip,解压,所有的 www文件都在assets文件夹中,相当于开源了有木有,看看那些最优秀的practice。看中哪些优秀的app,下下来,如何在googleplay上下载?把googleplay应用的地址贴到

            如何显示相对时间?

            如几分钟前,几天前等,这篇教程


            发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?

            暂时的解决方法是,不进行翻译校正, 在 /platforms/android/build.gradle 中的android {}节中加入:

             


            如何在列表右下方添加时间等信息?

            span 可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:

            
            

             


            如何回到上一页面?

            goBack([backCount]),backCount指定回去多少个页面(-1代表回去一个页面),默认为-1


            如何关闭应用?

            ionic.Platform.exitApp();
            

            在安卓设备上如何让title居中?

            在headerbar中添加

             

            不过这个设置对ion-view无效,亲测,如果要统一让所有navbar上的title居中(包括上面的headerbar),可以在config里设置,如:

            .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
              $ionicConfigProvider.navBar.alignTitle(‘center‘);
              ...
            

            如果要让某一个view title居中,可以用ionic官方文档


            如何让在sidemenu中的headerbar能够显示头像等其他信息?

            解决方案是去掉headerbar,添加一个avatar到sidemenu content中,如:

             

             


            ionic的subheader挡住了内容区域怎么办?

            解决方案是给has-subheader,同理也可以加

            
            

            对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?

            可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖


            ionic如何处理回退按钮?例如询问用户是否真的要退出应用

            可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件,除去有二级历史页面的我单独判断了下,注意增加依赖。

            $ionicPlatform.registerBackButtonAction(function(e) {
                var current_state_name = $state.current.name;
                if(current_state_name !== ‘sidemenu.post‘
                 && current_state_name !== ‘sidemenu.contact_town‘ &&
                current_state_name !== ‘sidemenu.contact_people‘){
                    $ionicPopup.confirm({
                        title: ‘退出应用‘,
                        template: ‘您确定要退出xxxx吗?‘
                    }).then(function (res) {
                        if (res) {
                            //ionic.Platform.exitApp();
                            navigator.app.exitApp();
                        } else {
                            console.log(‘You are not sure‘);
                        }
                    });
                    e.preventDefault();
                    return false;
                }else{
                    navigator.app.backHistory();
                }
            },100);
            

             


            ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?

            在应用的注册或者登录部分,不记名token被存储到本地存储中。当你向后端请求一个服务时,你需要把这个app.jsAngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应403,跳转到重新登录页面.

            $httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
                return {
                    ‘request‘: function (config) {
                        config.headers = config.headers || {};
                        if (User.getToken()) {
                            config.headers.Authorization = ‘Bearer ‘ + User.getToken();
                        }
                        return config;
                    },
                    ‘responseError‘: function (response) {
                        if (response.status === 401 || response.status === 403) {
                            //如果之前登陆过
                            if (User.getToken()) {
                                $rootScope.$broadcast(‘unAuthenticed‘);
                            }
                        }
                        return $q.reject(response);
                    }
                };
            });
            

             


            ionic如何实现搜索框内的全部清除按钮?

            在label中的input不能嵌入按钮,因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框,注意ng-model需要是一个对象才能置空,变量不行:

             

            前言

            Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案。


            一些常识与技巧

            • ion-content处使用 <i>上用<label>标签内的事件会在整个style=""
            • 能用ng-if,ng-showion-list中的ng-click事件,可以在item中的元素上再套一层div
            • 可以用$filterid : 4,应写成 var id = InfoListService.getListLength()+1+"";
            • 使用$log而不是console.log呢?可以看看ionic集成的crosswalk
            • services 的文件名可能会重合,但是他们意义差不多,可以将services中的文件名大写进行区分,或者加后缀xxxService
            • 安装cordova插件的时候用package.json中添加这个插件的条目,如果有人clone了你的项目想在本地运行,可以用cordovaPlugins条目安装对应的插件。如果直接用package.json
            • 上传base64编码的时候如果提示413错误,是因为文件过大导致的,可以在nodejs中设置bodyparser的文件限制:

              var bodyParser = require(‘body-parser‘);
              app.use(bodyParser.json({limit: ‘50mb‘}));
              app.use(bodyParser.urlencoded({limit: ‘50mb‘, extended: true}));
              
            • img 中 base64编码的图片无法显示?在源码中发现angular添加了unsafe标签?需要在白名单中添加

              $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):|data:image\//);
              
            • 有时候pm2运行有问题,重启一下即可

            • 在ios设备上运行

              问题列表

              1. 如何在ionic中加载本地图片?
              2. 如何将template加载到某个tab或某个sidemenu项目下?
              3. 用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?
              4. 更新了数据,如何让界面更新呢?
              5. controller.js和service.js文件越来越大怎么办?
              6. 如何显示相对时间?
              7. 如何在列表右下方添加时间等信息?
              8. 如何关闭应用?
              9. 如何让在sidemenu中的headerbar能够显示头像等其他信息?
              10. 对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?
              11. ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
              12. 如何在某个界面中去掉导航栏?

                如果某个界面上不想要导航栏,可以简单地在最顶端的标签中添加

                如何在ionic中加载本地图片?

                对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如../,否则在浏览器中可以正常显示,在设备上不行,结构如下所示:

                .login-page {
                  background:url(../img/signup_bg.png);
                  background-size: cover;
                  background-repeat: no-repeat;
                }
                

                但是对于在页面中定义的图片路径,从

                
                

                 


                如何在ionic中嵌入网页代码?

                使用$sce模块,用

                如何将template加载到某个tab或某个sidemenu项目下?

                 可以指定name,ionic就知道该把该状态的template渲染到哪边了。例如:

                
                

                运行serve命令时ionic报错?

                看看你是不还有一个终端在运行着serve呢?

                 


                用docker跑ionic的时候,不能把地址绑定到0.0.0.0怎么处理?

                可以用

                加载页面的时候会看到双括号一闪而过?

                index.html,其未被渲染好的模版可能会被用户看到。用Angular才有机会把它解释成你期望看到的内容。不过好消息是,在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作,建议使用 <p ng-bind="greeting"></p>


                更新了数据,如何让界面更新呢?

                可以用广播,注意

                如何实现IonicView中card上面有一列分割线的效果?

                在css里定义

                #info-up {
                  border-top: 4px solid #f06336;
                }
                

                 


                controller.js和service.js文件越来越大怎么办?

                所有的控制器不必都放在controllers.js这一个文件中,可以新建controllers文件夹,
                然后把每个controller都建一个.js文件,同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖,第一个加载的js中模块中要加[…],其他都不需要。如:

                // File : /js/directives/mainDirective.js
                angular.module(‘app.directives‘,[]);
                
                // File : /js/directives/myGreatDirective.js
                angular.module(‘app.directives‘)  
                    .directive(‘myGreatDirective‘, function(){
                        return {
                            //...
                        }
                    });
                
                // File : /js/directives/myBetterDirective.js
                angular.module(‘app.directives‘)  
                    .directive(‘myBetterDirective‘, function(){
                        return {
                            //...
                        }
                    });
                
                ...
                

                angular.module(‘fcws.controllers‘,[‘ionic‘, ‘fcws.services‘]);
                angular.module(‘fcws.services‘, []);
                

                可以达到和上面一样的效果,而且可以统一管理.


                如何寻找优秀的范例代码?

                目前有些ionic 的app没有进行代码混淆,至少ionic官方的ionic view没有进行代码混淆,下载他们的app,文件名改成zip,解压,所有的 www文件都在assets文件夹中,相当于开源了有木有,看看那些最优秀的practice。看中哪些优秀的app,下下来,如何在googleplay上下载?把googleplay应用的地址贴到

                如何显示相对时间?

                如几分钟前,几天前等,这篇教程


                发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?

                暂时的解决方法是,不进行翻译校正, 在 /platforms/android/build.gradle 中的android {}节中加入:

                 


                如何在列表右下方添加时间等信息?

                span 可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:

                
                

                 


                如何回到上一页面?

                goBack([backCount]),backCount指定回去多少个页面(-1代表回去一个页面),默认为-1


                如何关闭应用?

                ionic.Platform.exitApp();
                

                在安卓设备上如何让title居中?

                在headerbar中添加

                 

                不过这个设置对ion-view无效,亲测,如果要统一让所有navbar上的title居中(包括上面的headerbar),可以在config里设置,如:

                .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
                  $ionicConfigProvider.navBar.alignTitle(‘center‘);
                  ...
                

                如果要让某一个view title居中,可以用ionic官方文档


                如何让在sidemenu中的headerbar能够显示头像等其他信息?

                解决方案是去掉headerbar,添加一个avatar到sidemenu content中,如:

                 

                 


                ionic的subheader挡住了内容区域怎么办?

                解决方案是给has-subheader,同理也可以加

                
                

                对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?

                可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖


                ionic如何处理回退按钮?例如询问用户是否真的要退出应用

                可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件,除去有二级历史页面的我单独判断了下,注意增加依赖。

                $ionicPlatform.registerBackButtonAction(function(e) {
                    var current_state_name = $state.current.name;
                    if(current_state_name !== ‘sidemenu.post‘
                     && current_state_name !== ‘sidemenu.contact_town‘ &&
                    current_state_name !== ‘sidemenu.contact_people‘){
                        $ionicPopup.confirm({
                            title: ‘退出应用‘,
                            template: ‘您确定要退出xxxx吗?‘
                        }).then(function (res) {
                            if (res) {
                                //ionic.Platform.exitApp();
                                navigator.app.exitApp();
                            } else {
                                console.log(‘You are not sure‘);
                            }
                        });
                        e.preventDefault();
                        return false;
                    }else{
                        navigator.app.backHistory();
                    }
                },100);
                

                 


                ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?

                在应用的注册或者登录部分,不记名token被存储到本地存储中。当你向后端请求一个服务时,你需要把这个app.jsAngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应403,跳转到重新登录页面.

                $httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
                    return {
                        ‘request‘: function (config) {
                            config.headers = config.headers || {};
                            if (User.getToken()) {
                                config.headers.Authorization = ‘Bearer ‘ + User.getToken();
                            }
                            return config;
                        },
                        ‘responseError‘: function (response) {
                            if (response.status === 401 || response.status === 403) {
                                //如果之前登陆过
                                if (User.getToken()) {
                                    $rootScope.$broadcast(‘unAuthenticed‘);
                                }
                            }
                            return $q.reject(response);
                        }
                    };
                });
                

                 


                ionic如何实现搜索框内的全部清除按钮?

                在label中的input不能嵌入按钮,因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框,注意ng-model需要是一个对象才能置空,变量不行:

Ionic 常见问题及解决方案 -----转

标签:ssi   location   分页   ng-model   rms   sign   contact   混淆   word   

原文地址:http://www.cnblogs.com/ycxqdkf/p/7053637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!