问题描述:系统有两个导航栏,一个是kendo的menu,另外一个kendo的mobilegroupbutton.
系统已经添加了ui-router-extras相关的js,angular 也设置了sticky:true。
mobilegroupbutton是根据kedo menu的选项来生成的,现在groupbutton里面查找有无当前选项的对象值,
若没有就添加到groupbutton,然后
$state.go(dataItem.widget,{'menuItem':dataItem}, {reload: true});
若存在就直接
$state.go(dataItem.widget,{'menuItem':dataItem});
groupbutton也可以导航,用kendo的onselect事件:
$scope.onSelect = function(e) {
$state.go(tabButtonValues[e.index].widget,{'menuItem':tabButtonValues[e.index]});
$scope.tempMenuItem=tabButtonValues[e.index];
};
问题分析:
若一直使用menu导航,每个页面的状态都可以保留,无刷新;
若一直使用groupbutton导航,每个页面的状态也可以保留,无刷新;
但是两者交替使用,就会出现页面的刷新问题。比较两者的不同:
$state.go(dataItem.widget,{'menuItem':dataItem});
$state.go(tabButtonValues[e.index].widget,{'menuItem':tabButtonValues[e.index]});
两者唯一不同就是参数‘menuItem’的值,问题找到了,因在根据menu产生groupbutton时,没有将整个menu里的item值赋值给groupbutton,导致,交替导航时传输的参数对象不完全一样。
总结:若要使状态都保持不变,出来url是一样,参数对象也必须一致。
相关推荐
angular-sticky, 纯 javascript AngularJS指令,用于在滚动时使元素粘附 Angular 粘性纯 javascript AngularJS 指令,用于在滚动时使元素粘附演示是否要查看操作中的指令? 访问 ...
Angular-angular-sticky-things.zip,有角2 有角粘性物体的粘性指令,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用...
使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况...以上这篇angular4强制刷新视图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
名称:Angular state inspector -------------------- 版本:1.4.6 作者:Anton Lunev 分类:开发者工具 -------------------- 概述:帮助您调试 Angular 组件状态。支持 Angular 1/2+/Ivy! Angular 的 Angular ...
角粘物 一个使用户在没有jQuery依赖性的情况下滚动(对于Angular 2+)时保持粘性的Angular指令。 。 要求 Angular(需要Angular 4.x或... npm install @w11k/angular-sticky-things 与纱线: yarn add @w11k/angular
Angular2中Router路由跳转Navigate的使用与刷新页面问题详解 Angular2中Router路由跳转Navigate的使用是Angular2路由跳转的核心部分,而刷新页面问题则是开发中常见的问题。本文将详细介绍Angular2中Router路由跳转...
刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!在网上搜了一下看到有些人写的解决办法还有错误在里面,一眼看就知道的错误,感觉这些人真的有毛病,决定写了博客,为什么那么不...
angular-seed — AngularJS 应用程序的种子这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序,并...
特征: 如果粘性元素高于视口,它的行为就像一个普通元素,... div data-sticky-element data-sticky-element-margin =" 20 " data-sticky-element-bottom-selector =" .footer " data-sticky-element-depend-on =" .m
Angular的Angular State Inspector支持Angular的所有版本:-AngularJs-Angular 2+-Angular Ivy-混合应用程序(AngularJs + Angular)扩展了适用于Angular Web应用程序的Chrome开发人员工具。 将新的面板“状态”添加...
Angular State Inspector 提供了丰富的调试功能,如断点设置、数据观察、事件追踪等,帮助开发者定位问题所在,优化代码性能。 5. **Ivy兼容性**: Angular State Inspector 还支持Angular的最新版本,包括使用...
**Angular Sticky Headers 深入解析** 在前端开发中,用户体验是至关重要的,尤其是在大量数据展示时。"Angular Sticky Headers" 是一个JavaScript解决方案,专为Angular框架设计,旨在提升用户界面的可读性和导航...
在使用Angular2框架进行前端开发时,我们经常会遇到由router模块的navigate方法导致页面刷新的...以上方法可以帮助开发者解决在Angular2中使用router模块进行页面导航时遇到的页面刷新问题,提高用户体验和应用性能。
今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-...
在Angular框架中,刷新当前页面通常涉及到路由管理和组件生命周期的处理。本文将深入探讨如何在Angular应用中实现实现页面刷新的功能。 首先,从Angular 5.1版本开始,引入了一个名为`onSameUrlNavigation`的配置...
使用Angular Http Interceptor刷新令牌的三种方法Angular刷新Interceptor刷新令牌的三种方法带有tokenRefreshed $行为的强力解决方案,使用信标SignalRefreshed $ BehaviorSubject作为信号量在catchError rxjs运算符...
标题"angular-sticky-header:用StackBlitz创建:high_voltage:"提示我们这将是一个关于如何在Angular项目中实现粘性头部的教程,而使用StackBlitz作为在线代码编辑器。StackBlitz是一个基于Web的集成开发环境,允许...
然而,在实际开发过程中,开发者经常会遇到一些棘手的问题,例如如何返回上一页并刷新页面。今天,我们将介绍如何使用Angular和Ionic实现返回上一页并刷新页面的功能。 什么是Ionic History 在Ionic中,Ionic ...
This is especially true on the web, where you also need to ensure that the state is reflected in the URL. In addition, you might want to split applications into multiple bundles and load them on ...