ionic保存数据后，后退到列表页并刷新列表 - 是我不够爱 - ITeye技术网站
博客分类：
环境ionic版本1.1.1,列表页使用了ion-infinite-scroll 上拉刷新分页显示数据，数据添加页是一个新页面，不是由modal弹出的，而是存在于路由上的。
尽管路由上可以设置cache:false来告诉ionic不缓存页面，但是感觉这种逻辑不符合常理，如果用户对数据无修改后退之后页刷新列表的话，请求后台请求太频繁了，所以需要有一种在用户修改数据后后退才会刷新列表页的方式。
var backview = $ionicHistory.backView();
var histories = $ionicHistory.viewHistory().
$ionicHistory.currentView(histories[backview.backViewId]);
//清空当前页的上一页的缓存
$ionicHistory.clearCache([backview.stateId]).then(function(){
//重定向url到上一页的url路径
$location.path(decodeURI(backview.url));
转载请注明地址：
是我不够爱
浏览: 3167 次
来自: 河北ionic 安装遇到的问题以及解决方案
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
公司里要用到 Ionic 做移动App 混合开发
一个环境搭建折腾了好几天。一是公司权限问题，二是网络问题，你懂得。
Ionic 环境搭建官网有教程。本来几行命令就能搞定的事，一旦遇到网络问题，就蛋疼了。慢的要死
Ionic 框架简单了解了一下，由于是基于Anjular.js的，拥有Anjular.js的一些独有特性。比之前接触过的JS ，jQuery ,jQueryMobile要强大且方便的多。
安装ionic 框架，正常流程官网有详细介绍，如果人品较好，分分钟钟就搞好了，还有一种情况，像我这样悲催，网络问题，试了几十遍还是没成功。
好在最后用了比较给力的网，折腾一周才搞定。
mac正常流程：
1、安装Node.js。（最新版本4.1一定是集成了npm 这个包管理工具的）
2、终端上执行命令，$sudo npm install -g cordova 安装cordova
3、终端上执行命令，$sudo npm install -g ionic 安装ionic
当然你可以两行命令合在一起，$sudo npm install -g corvoda ionic
顺利的话，稍等片刻就能安装成功。接下来可以用命令行新建一个工程：
4、终端上执行命令，$ionic start myApp blank 新建一个空工程
或者$ionic start myApp tabs 新建一个带tab框架的工程
或者$ionic start myApp sidemenu 新建一个带侧边栏的工程
5、cd myApp 到工程目录下，一般工程会users/yourUserName/myApp目录下。
6、添加iOS 运行平台。$ionc platform add ios
7、build $ionic build ios
8、在iOS模拟器上运行，$ionic emulate ios 查看效果
下面简单说一下我遇到的情况：
1、安装Node.js 下载比较慢。耐心就行。
2、安装cordova.一般用npm 的源：可以用命令查看 $npm config list -l 看到一个registry=http://就能安装上，视网速而定。如果不能，在终端执行命令：$ npm set registry https://registry.npm.taobao.org
将源改为 淘宝镜像。这时corvoda一般能安装成功了。安装cordova 一般不会有太大问题。问题多出在安装ionic .
3、在不改变淘宝源的情况下，用命令试试。两个同事用的$npm 的源都没问题，如果出现ERR， retry 就是网络的原因了。ERR socket hung up 也是网络的问题。这些网络问题，一般在很少人使用网络的时候应该会好点，我在将registry 改为： pmjs.org/ 后竟然成功了。
总结一下。大多问题的出现是因为网络。我就把github上npm 和ionic 的issue 都看了一遍，还有一些中国的同学遇到类似问题，大多是因为网络问题，vpn并不好使。npm 的registry 设置成 pmjs.org 会好一点，谢谢cnpm那些热心的人.还有一点是因为如果一次安装ionic 不成功，就不要多次尝试了，npm的包之间的依赖貌似很麻烦，没深入了解，就不多谈它了，可以把$npmcache clean,一下。如果还不行，建议把Node.js 卸载重新安装。卸载方法：
把一下代码放到一个文本编辑器里。保存，取名uninstall_node.sh
#!/bin/bash
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
sudo rm /usr/local/${i}
sudo rm -rf /usr/local/lib/node \
/usr/local/lib/node_modules \
/var/db/receipts/org.nodejs.*
然后将该文件拖到终端执行一下，为了防止有些删除不完全，如有提示显示：permission denied可以 做完上一步操作后执行一下代码：
$chmod 777 uninstall_node.sh
然后:找到目录
usr/local/bin
usr/local/lib
把里面有关 node 、node_moudel的文件夹全部删除
重启一下mac 再安装node.js
关于npm这个包管理工具的具体内部机制，我也不太清楚，因为只是把它当做工具。方便就行。有兴趣的同学可以参考 http://cnpmjs.org/ 。
希望搭建ionic 的同学不要遇到我这么悲催的情况。
以上过程参考了许多网上的资料，在此谢过各位分享自己经验的热心人。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(7076)
CodeSecTeam微信公众号
你羡慕的人，背后已经经历无数挫折和冷眼，越成功越容易忘记伤口有多疼。这个世界就是这样，人情淡漠，没人会关心你付出了多少努力，受挫的过程有多难受，所以永远不要试图在别人身上寻求安慰和同情，当初选择的路，跪着也走完，宁愿被别人嫉妒着鄙夷，也不要成为平凡的笑柄。
手机客户端7569人阅读
webapp（1）
Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题，本文尝试对这些问题给出解决方案。
一些常识与技巧
list&有延迟，可以在ion-content处使用&overflow-scroll=&true&尝试在&i&上用ng-click上是没效果的&label&标签内的事件会在整个label内被触发，点哪都触发快捷修改背景色style=&background-color: #212326;&能用ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div可以用ng-class=&{'important': post.important}&配合css 根据列表元素显示不同的效果获取日期用$filter，var
postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');列表中的元素不能写成&id : 4，应写成&id
: &4&,注意在创建id变量的时候也需要转成string,如var id = InfoListService.getListLength()+1+&&;使用$log进行log输出,为什么用$log而不是console.log呢？可以看看在安卓上的体验比较差，动画有延迟？可以试试controllers和services&的文件名可能会重合，但是他们意义差不多，可以将controllers中的文件名小写，对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService安装cordova插件的时候用ionic plugin add ...的方式添加，这样会在package.json中添加这个插件的条目，如果有人clone了你的项目想在本地运行，可以用ionic
state restore它会根据cordovaPlugins条目安装对应的插件。如果直接用cordova
plugin add&安装则不会更新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标签？需要在白名单中添加data:image
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):|data:image\//);
有时候pm2运行有问题，重启一下即可
在ios设备上运行ionic run ios --device
如何在某个界面中去掉导航栏?
如果某个界面上不想要导航栏，可以简单地在最顶端的标签中添加hide-nav-bar=&true&
如何在ionic中加载本地图片?
对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如www/css/style.css要加../,否则在浏览器中可以正常显示，在设备上不行，结构如下所示：
.login-page {
background:url(../img/signup_bg.png);
background-size:
background-repeat: no-
但是对于在页面中定义的图片路径，从www路径开始算,否则浏览器中可显示，但设备上不行,img文件夹和index.html在一级,如：
&img src=&img/commander.jpg&&
如何在ionic中嵌入网页代码?
使用ng-bind-html这个类,不过它会过滤原始html的标签，我们可以引入$sce模块，用$sce.trustAsHtml()方法信任我们获取的网页
&ion-nav-view name=&menuContent&&&可以指定name，然后在子状态中使用该name，ionic就知道该把该状态的template渲染到哪边了。例如：
// signup page
.state('auth.signup', {
url: '/signup',
'auth-signup': {
templateUrl: 'templates/auth-signup.html',
controller: 'SignUpCtrl'
另有一个tabs中声明该auth-signup:
&ion-tab title=&Sign Up& icon-on=&ion-ios-personadd&
icon-off=&ion-ios-personadd-outline& href=&#/auth/signup&&
&ion-nav-view name=&auth-signup&&&/ion-nav-view&
&/ion-tab&
运行serve命令时ionic报错?
ionic $ An uncaught exception occured and has been reported to Ionic
看看你是不还有一个终端在运行着serve呢？
用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?
可以用ionic serve -all的方法解决
加载页面的时候会看到双括号一闪而过？
angularjs&在使用双括号的时候，第一个加载的页面，也就是应用中的index.html,其未被渲染好的模版可能会被用户看到。用ng-bind就不会遇到这个问题。造成这种现象的原因是，浏览器需要首先加载HTML页面，渲染它，然后Angular才有机会把它解释成你期望看到的内容。不过好消息是，在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作，建议使用ng-bind。
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(){
// File : /js/directives/myBetterDirective.js
angular.module('app.directives')
.directive('myBetterDirective', function(){
看了解更多,嗯这篇文章写的还不是best practice，因为你还得记着自己把[]写到那个模块里了，统一地写在app.js中即可，在app.js最下面加上类似：
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 {}节中加入:
lintOptions {
disable 'MissingTranslation'
disable 'ExtraTranslation'
如何在列表右下方添加时间等信息?
span&可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:
&ion-item class=&item item-avatar-left & ng-repeat=&message in messages&&
&img src=&../../img/commander.jpg&&
&span class=&item-note&&{{message.create_at}}&/span&
&h2 &{{message.name}}&/h2&
{{message.content}}&/p&
&/ion-item &
如何回到上一页面?
用$ionicHistory这个模块,引入该模块后使用goBack([backCount])，backCount指定回去多少个页面（-1代表回去一个页面），默认为-1
如何关闭应用?
ionic.Platform.exitApp();
在安卓设备上如何让title居中?
在headerbar中添加align-title=&center&,如:
&ion-header-bar class=&bar-positive& align-title=&center&&
&h1 class=&title&&{{username}}&/h1&
&/ion-header-bar&
不过这个设置对ion-view无效，亲测，如果要统一让所有navbar上的title居中(包括上面的headerbar)，可以在config里设置,如:
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center');
如果要让某一个view title居中，可以用$ionicNavBarDelegate，参考
解决方案是去掉headerbar,添加一个avatar到sidemenu content中，如:
&ion-side-menu side=&left&&
&ion-content class=&bar-positive&&
&ion-list&
&ion-item class=&item item-avatar item-positive& href=&#&&
&img src=&img/commander.jpg&&
&h2 class=& light&&
&i class=&icon ion-ios-star&&&/i&{{title}}
&a&{{username}}&/a&
&/ion-item&
解决方案是给&ion-content&加类has-subheader,同理也可以加has-header。如下:
&ion-content class=&has-header has-subheader&&
对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?
可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖
ionic如何处理回退按钮？例如询问用户是否真的要退出应用
可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件，除去有二级历史页面的我单独判断了下，注意增加依赖。
$ionicPlatform.registerBackButtonAction(function(e) {
var current_state_name = $state.current.
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();
console.log('You are not sure');
e.preventDefault();
navigator.app.backHistory();
ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
在应用的注册或者登录部分，不记名token响应了这个请求并且这个token被存储到本地存储中。当你向后端请求一个服务时，你需要把这个token放在头部中。你可以在app.js的.config方法中使用AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应401或403，跳转到重新登录页面.
$httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
'request': function (config) {
config.headers = config.headers || {};
if (User.getToken()) {
config.headers.Authorization = 'Bearer ' + User.getToken();
'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需要是一个对象才能置空,变量不行:
&span class=&item-input-wrapper&&
&i class=&icon ion-ios-search placeholder-icon&&&/i&
&input type=&search& placeholder=&请输入姓名前缀& ng-model=&search.key&&
&i class=&icon ion-close-circled placeholder-icon& style=&vertical-align:&
on-tap=&clearSearch()& ng-if=&search.key.length&&&/i&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：19471次
排名：千里之外
(1)(1)(2)(1)(2)(3)}