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

原文网址: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需要是一个对象才能置空,变量不行:

时间: 2024-12-19 12:00:16

Ionic 常见问题及解决方案 -----转的相关文章

Ionic 常见问题及解决方案

原文网址:http://mclspace.com/2016/01/16/ionic-problems-and-solutions/ 前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案. 一些常识与技巧 list 有延迟,可以在ion-content处使用 overflow-scroll="true"尝试 在<i>上用ng-click上是没效果的 <label>标签内的事件会

NHibernate的常见问题及解决方案

问题1 : 异常:in expected: <end-of-text> (possibly an invalid or unmapped class name was used in the query) [from Customer] 解决方案:查看HQL语句查询的是否是实体类,映射文件属性是否正确:复制到输出目录à始终复制 ..生成操作à嵌入的资源. 问题2: 异常:缺少必需的属性“name”. 解决方案:查看映射文件里,是否哪个<property>节点缺少name属性 问题3

NTP常见问题和解决方案&配置文件详解

一.命令:NTP.ntpq.ntpdate ntpd.ntpq.ntpdate1.ntpq -np //输出参数说明    -n:不显示域名#ntpq -np     remote           refid      st t when poll reach   delay   offset  jitter============================================================================== 127.127.1.0   

《PDF.NE数据框架常见问题及解决方案-初》

1.新增数据库后,获取标识列的值: 解决方案:    PDF.NET数据框架,已经为我们考略了很多,因为用PDF.NET进行数据的添加操作时,一般我们会传递Model实体进去,             在进行数据库的新增操作时,执行成功后,新增记录的标示又会赋值给传递的实体,例如: ///<summary>             ///添加一体记录             /// <param name="model">实体</param>    

[转]Linux下使用JNI的常见问题及解决方案

Linux下使用JNI的常见问题及解决方案 转载地址:http://www.cnblogs.com/javawebsoa/p/3220069.html 我碰到的问题是bad value 参考这里解决的 linux生成动态库时遇到了relocation R_X86_64_32 against `.rodata' can not be used when making a shared object; recompile with -fPIC错误. 由于我的系统是AMD64位的,所以需要在编译的时候

Android Studio使用过程中常见问题及解决方案

熟悉Android的童鞋应该对Android Studio都不陌生.Android编程有两个常用的开发环境,分别是Android Studio和Eclipse,之前使用比较多的是Eclipse,而现在呢,由于Android Studio的优越性,越来越多的人转而使用它了. 随着Android Studio使用人数的增加,使用过程中的问题也日益凸显,本文小编就整理了一些Windows系统下使用Android Studio的常见问题及解决方案,大家可以围观围观,遇到类似问题,不妨可以试试小编下面分享

将标准demo视频部分代码移植到工程中常见问题和解决方案

近日,有很多客户反馈将标准android demo的VideoActivity视频部分代码移植到自己的工程中遇到本地视频黑屏或者远程视频显示不了的问题,这里对这些问题做汇总说明,并给出解决方案. 1.本地视频黑屏.不显示问题可能原因:没有设置音视频参数,没有使用Java采集模式解决方法:将标准demo里面hallactivity类中的ApplyVideoConfig函数移植到工程中,在初始化SDK之后调用,如下面所示 //初始化SDK anychat.InitSDK(android.os.Bui

ARKit从入门到精通(11)-ARKit开发常见问题及解决方案

转载请注明出处:ARKit从入门到精通(11)-ARKit开发常见问题及解决方案 本文主要介绍ARKit开发过程中一些常见问题 1.ARKit框架无法导入问题 2.ARKit运行黑屏或者白屏问题:Unable to run the session, configuration is not supported on this device: <ARWorldTrackingSessionConfiguration 3.ARKit添加虚拟物体无法显示问题:ARSession不支持打断点 1.1-A

虚拟机管理需要哪些功能,以及虚拟机管理常见问题和解决方案

虚拟机里面主要涉及哪些功能,虚拟机管理需要哪些功能,以及虚拟机管理常见问题和解决方案-CNware虚拟化软件1 虚拟机部署部署单台虚拟机:根据模板或者自定义方式创建单台虚拟机,支持自主设置虚拟机的VCPU.内存.存储及网络.批量部署虚拟机:可通过模板批量部署虚拟机,并能针对每台虚拟机的VCPU.内存.存储.网络做个性化设置,最多能支持10台虚拟机批量部署.2 生命周期管理虚拟机支持多种操作方式,用户可根据需要灵活操作虚拟机,包括创建.开机.关机.重启.挂起.恢复.删除等.支持在共享存储上的虚拟机