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

Posted 2020-09-23

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

前言

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

---

一些常识与技巧

• ion-content处使用 <i>上用<label>标签内的事件会在整个style=""
• 能用ng-if,ng-show和ion-list中的ng-click事件，可以在item中的元素上再套一层div
• 可以用$filter，id : 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.js的angularjs的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应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-show和ion-list中的ng-click事件，可以在item中的元素上再套一层div
     • 可以用$filter，id : 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.js的AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应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-show和ion-list中的ng-click事件，可以在item中的元素上再套一层div
           • 可以用$filter，id : 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.js的AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应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需要是一个对象才能置空,变量不行: