`

angular state sticky true 刷新問題

 
阅读更多

问题描述:系统有两个导航栏,一个是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指令,用于在滚动时使元素粘附.zip

    angular-sticky, 纯 javascript AngularJS指令,用于在滚动时使元素粘附 Angular 粘性纯 javascript AngularJS 指令,用于在滚动时使元素粘附演示是否要查看操作中的指令? 访问 ...

    Angular-angular-sticky-things.zip

    Angular-angular-sticky-things.zip,有角2 有角粘性物体的粘性指令,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用...

    angular4强制刷新视图的方法

    使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况...以上这篇angular4强制刷新视图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    Angular state inspector-1.4.6.zip

    名称:Angular state inspector -------------------- 版本:1.4.6 作者:Anton Lunev 分类:开发者工具 -------------------- 概述:帮助您调试 Angular 组件状态。支持 Angular 1/2+/Ivy! Angular 的 Angular ...

    angular-sticky-things:Angular 2+的Sticky指令

    角粘物 一个使用户在没有jQuery依赖性的情况下滚动(对于Angular 2+)时保持粘性的Angular指令。 。 要求 Angular(需要Angular 4.x或... npm install @w11k/angular-sticky-things 与纱线: yarn add @w11k/angular

    angular-sticky

    angular-seed — AngularJS 应用程序的种子这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序,并...

    解决Angular4项目部署到服务器上刷新404的问题

    刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!在网上搜了一下看到有些人写的解决办法还有错误在里面,一眼看就知道的错误,感觉这些人真的有毛病,决定写了博客,为什么那么不...

    fxstr-angular-sticky

    特征: 如果粘性元素高于视口,它的行为就像一个普通元素,... div data-sticky-element data-sticky-element-margin =" 20 " data-sticky-element-bottom-selector =" .footer " data-sticky-element-depend-on =" .m

    Angular state inspector-crx插件

    Angular的Angular State Inspector支持Angular的所有版本:-AngularJs-Angular 2+-Angular Ivy-混合应用程序(AngularJs + Angular)扩展了适用于Angular Web应用程序的Chrome开发人员工具。 将新的面板“状态”添加...

    Angular懒加载机制刷新后无法回退的快速解决方法

    今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-...

    angular2中router路由跳转navigate的使用与刷新页面问题详解

    主要给大家介绍了angular2中router路由跳转navigate的使用与刷新页面问题的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

    Angular刷新当前页面的实现方法

    主要介绍了Angular刷新当前页面的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    Angular Router

    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 ...

    解决Angular2 router.navigate刷新页面的问题

    造成这个问题一般是因为我们在<form>表单中使用<button>时忘记添加type属性,在表单中,如果忘记给按钮添加属性,会默认为submit,如果在子元素中会向上冒泡触发submit <button (click)=toDetail()&...

    Progressive Web Apps with Angular (True PDF)

    Progressive Web Apps with Angular (True PDF) (Publication Date: 2019-07-14)

    Reactive Programming with Angular and ngrx:

    "Reactive Programming with Angular and ngrx: Learn to Harness the Power of Reactive Programming with RxJS and ngrx Extensions" English | ISBN: 1484226194 | 2017 | 148 pages | PDF | 3 MB Manage your ...

    Switching to Angular 2

    Key Features, Get up to date with the latest changes to Angular 2, including the improvements to directives, change detection, dependency injection, router, and moreUnderstand Angular 2's new ...

    Angular Http Interceptor刷新令牌的三种方法-Node.js开发

    使用Angular Http Interceptor刷新令牌的三种方法Angular刷新Interceptor刷新令牌的三种方法带有tokenRefreshed $行为的强力解决方案,使用信标SignalRefreshed $ BehaviorSubject作为信号量在catchError rxjs运算符...

Global site tag (gtag.js) - Google Analytics