使用angularjs、ionic框架如何实现返回上一页并刷新

简介: 普通的js返回并刷新这里就不多说了,百度就有很多方法。下面说的是使用了angularjs、ionic开发的一个手机app中使用的一个返回上一页并刷新的方法。

普通的js返回并刷新这里就不多说了,百度就有很多方法。

下面说的是使用了angularjs、ionic开发的一个手机app中使用的一个返回上一页并刷新的方法。

场景:回复的页面是单独的,点击保存回复后会回到上一个页面,此时  上一个页面会显示出你新回复的内容

回复页面的controller的相关代码:

$scope.save = function () {
        Replies.giveAReply($scope.reply);    //保存回复
        $ionicHistory.goBack();              //返回上一页
 };

记得在controller的function参数里加上$ionicHistory,如下

angular.module('sth.controllers').controller('ReplyCtrl', function ($scope, $state, $ionicConfig, Replies,  $ionicHistory, $cordovaCamera, $ionicModal, Auth)  

上一个页面的controller的相关代码:

1   $scope.rapidResponse.update = function () {
2             $scope.rapidResponse.replies = Replies.getReplies('rapid_response', $scope.rapidResponse.id);
3         };                               //获取回复
4 
5   $scope.rapidResponse.update();         //函数调用
6 
7   $scope.$on('$stateChangeSuccess', $scope.rapidResponse.update); //如果有变化即重新调用获取回复的函数,实现了刷新

记得$scope.$on('$stateChangeSuccess', $scope.rapidResponse.update);

不能写成$scope.$on('$stateChangeSuccess', $scope.rapidResponse.update()); 

不加括号表示调用的是函数的本身,加括号返回的是函数执行的结果。

stackoverflow里也有类似的解决方法:http://stackoverflow.com/questions/27853431/ion-list-does-not-refresh-after-state-go-is-called

如果还有更好的方法望指教,谢谢~

目录
相关文章
|
19天前
ionic 4 点击按钮跳转页面传值并刷新
ionic 4 点击按钮跳转页面传值并刷新
26 2
|
19天前
|
缓存
ionic4 路由跳转刷新实战
ionic4 路由跳转刷新实战
17 0
|
JavaScript 前端开发 Android开发
|
Android开发 JavaScript 开发工具
ionic入门之开始使用ionic框架
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/71120744 安装ionic npm install -g cordova ionic 首先,安装Node.js。
1297 0
|
缓存 Android开发
ionic中返回刷新问题
最近做ionic项目,发现自带的返回按钮返回回去不会刷新页面,会显示缓存的页面,我数字改变了也没办法 于是发现有个ionic中ionicView的生命周期onicView的生命周期的事件调用在每个ionicView的controller中使用$scope.$on('$ionicView.enter', function() {});调用。
1003 0
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1404 0
|
Android开发 iOS开发
ionic3项目实战教程 - 第12讲 ionic3制作icon和splash
这一讲主要包含以下几个部分: 1.设计icon; 2.设计splash; 3.生成各个平台各个尺寸的icon和splash; 1.设计icon 来,打开你的PS,新建-文件,像素为1024*1024,背景透明,确定; .
1170 0
|
Web App开发
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分: 1.个人中心ts具体代码展示; 2.个人中心html具体代码展示; 3.
1365 0
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。
1088 0
|
Web App开发
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
这一讲主要包含以下几个部分: 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.
1062 0