首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Angular Ui路由器:停止$state.go以重新加载控制器,但更改URL

Angular Ui路由器:停止$state.go以重新加载控制器,但更改URL
EN

Stack Overflow用户
提问于 2014-04-30 01:17:04
回答 2查看 10.7K关注 0票数 5

我的应用程序在选项卡之间切换时使用$state.go,这会导致重新初始化控制器,这些控制器中的作用域变量会更新,并导致内存泄漏。有没有一种方法可以停止重新初始化控制器,但在状态更改时更改URL?

下面的示例是我应用程序中的routes.js。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.state('home', 
{
    abstract    : true,            
    url         : '/home',
    templateUrl : 'scripts/home.html'
})
.state('home.summary', 
{
    url        : '/summary?userId', 
    controller : 'SummaryCtrl',                
    views      : 
    {               
        summary: 
        {
            templateUrl: 'scripts/home/summary.html'
        }
    }
})
.state('home.summary.detail', 
{
    url        : '/detail/:id',
    controller : 'DetailCtrl',                 
    views      : 
    {               
        detail: 
        {
            templateUrl: 'scripts/home/detail.html'
        }
    }
})

如果已经为唯一id加载了DetailCtrl,如何在进入home.summary.detail状态时停止重新加载DetailCtrl但更改URL?

也尝试在子状态的解析中执行$q.reject,它会停止重新加载控制器,但不会更改url。

我也尝试了reloadOnSearch=false,它会停止控制器的重新加载,但不会更改url。

EN

回答 2

Stack Overflow用户

发布于 2014-09-03 16:53:56

您可以使用$state.transitionTo而不是$state.go$state.go在内部调用$state.transitionTo,但会自动将选项设置为{ location: true, inherit: true, relative: $state.$current, notify: true }。您可以调用$state.transitionTo并设置location: false。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$state.go('.detail', {id: newId}) 

可以替换为

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 $state.transitionTo ('.detail', {id: newId}, { location: false, inherit: true, relative: $state.$current, notify: true }) 
票数 4
EN

Stack Overflow用户

发布于 2014-04-30 02:47:47

你可以有一个包含内存泄漏代码的抽象控制器。并且当url改变时抽象控制器不会更新。

这是来自官方github资源库的文档

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

看一下组合部分。

在这个演示中,contacts控制器将只调用一次contacts.detail控制器将在您每次更改状态时更新,但与contacts控制器http://plnkr.co/edit/gmtcE2?p=preview共享作用域

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23378045

复制
相关文章
Angularjs中UI Router超级详细的教程{{上}}
这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui router的基本用法,需要的朋友参考下吧 首先给大家介绍angular-ui-router的基本用法。 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvid
前朝楚水
2018/04/02
5.3K0
【Hybrid开发高级系列】AngularJS(三)——开发实践
http://blog.fens.me/angularjs-yeoman-project/
江中散人_Jun
2023/10/16
2580
【Hybrid开发高级系列】AngularJS(三)——开发实践
【转载】【ionic+angularjs】angularjs ui-router路由简介
之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域)。比如:
用户7605975
2020/07/28
7.5K0
angular-ui-router 多视图views
UI Router 中有三种方式激活一个路由: (1)$state.go():优先级较高的便利方式 (2)ui-sref:点击包含此指令跳转 (3)url:url导航
奋飛
2019/08/15
1.1K0
【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)
之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域)。比如:
用户5640963
2019/07/26
7.3K0
【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)
Blazor 中的路由和路由模板
过去的 ASP.NET Web 窗体和现代 Web 明显区别在于 Web 服务器入口是否存在路由组件。在 Web 窗体中,绝大多数 Web 终结点都是物理文件资源,直接通过其页面路径调用。
AI.NET 极客圈
2019/08/16
8.4K0
【Hybrid开发高级系列】AngularJS(一)——基础专题
  一向不喜欢追求刚刚新鲜出炉的事物的我,终于在node js出来一年后开始迈出脚步。
江中散人_Jun
2023/10/16
5860
【Hybrid开发高级系列】AngularJS(一)——基础专题
更改git url
由于git 仓库url改变,需要更改url,一般情况下更改origin的utl,更改方法为:
意气
2019/05/05
1.6K0
[PHP] url的pathinfo模式加载不同控制器的实现
使用自动加载和解析url的参数,实现调用到不同的控制器,实现了pathinfo模式和普通的url模式
唯一Chat
2019/09/10
6950
[PHP] url的pathinfo模式加载不同控制器的实现
vue 重新加载页面_页面重新加载
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/03
4.7K0
JavaScript框架比较:AngularJS vs ReactJS vs EmberJS
选择最适合项目需求的JavaScript框架,可以提高你发布有竞争力的web app的能力。 最后,你对基于JavaScript的app或网站找到了一条奇妙的思路。选择正确的框架可能对你项目的成功有着
前朝楚水
2018/04/03
12.7K0
JavaScript框架比较:AngularJS vs ReactJS vs EmberJS
Ionic3 导航分析
路由是前端构建单页面应用(SPA)必不可少的一部分,AngularJS1.x中有两种路由实现,一个是内置的ngRouter,还有一个是基于 ngRoute 开发的第三方路由模块uiRouter。这里为什么要提uiRouter?因为就自我感觉而言uiRouter 和 ionic导航在使用方式上有点像,特别是从它们提供的指令这一层来考虑。如果你没有了解过Angular4中的路由,其实也可以简单看看uiRouter的使用,不需要了解的多详细,仅仅理解它的那个指令的使用方式就可以了。
spilledyear
2018/08/21
2K0
Ionic3 导航分析
Angular UI 组件
官网:https://valor-software.com/ngx-bootstrap/#/
用户2098522
2018/05/05
1.5K0
Angular UI 组件
angular 路由懒加载_angular路由
在angular中路由即能加载组件又能加载模块,而我们说的懒加载实际上就是加载模块,目前还没有看到懒加载组件的例子。 加载组件使用的是component关键字 加载模块则是使用loadChildren关键字
全栈程序员站长
2022/11/08
1.3K0
前端面试题angular_Vue前端面试题
1,ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是,ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示。 第二点区别是,ng-if 会(隐式地)产生新作用域,ng-switch 、 ng-include 等会动态创建一块界面的也是如此。 这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。
全栈程序员站长
2022/11/07
14.2K0
Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)
Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎。不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学习Angular 2的知识概念的绝佳途径。 在文中,我们将会接触到很多Angular 2的重要概念,并附扩展阅读资料和自查小测试,供大家评估自己对Angular的了解程度。 Angular 经典问题及扩展阅读 1.  请解释Angular 2应用程序的生命周期hooks是什么? Angular 2组件/指令具有
葡萄城控件
2018/01/10
17.5K0
Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)
AngularJS爬坑之路——路由关于路由的那点事儿
关于路由,首先想到的是生活中的路由器。 类似路由器,AngularJS中的路由其实也是一样的概念
大牧莫邪
2018/08/27
1.5K0
进阶 | 重新认识Angular
| 导语 本文跟随着Angular的变迁聊聊这个框架,分享一些基础的介绍,以及个人的理解。 也用过其他框架,像React和Vue。 但与Angular结识较深,或许也是缘分吧。 谈谈Angular ---- 内容概要 数据绑定 (updated) 模块化组织 (new) 依赖注入 路由和lazyload (new) Rxjs (new) 预编译AOT (new) 拥抱变化,迎接未来 updated: 原有特性,有更新 new: 新增特性 ---- 数据绑定 ---- 常用模版绑定 常用模版引擎 1. S
用户1097444
2022/06/29
2.6K0
进阶 | 重新认识Angular
【17】进大厂必须掌握的面试题-50个Angular面试
Angular是一个开放源代码的前端Web框架。它是最流行的JavaScript框架之一,主要由Google维护。它提供了一个轻松开发基于Web的应用程序的平台,并使前端开发人员能够管理跨平台应用程序。它集成了强大的功能,例如声明性模板,端到端工具,依赖项注入以及各种其他使开发路径更流畅的最佳实践。
全栈程序员站长
2021/04/07
41.5K0
点击加载更多

相似问题

Ui-路由器$state.go()不重新加载数据

21

ui-路由器在$state.go之后更改url

12

angular-ui路由器重新加载视图

50

Angular UI路由器重新加载当前状态

10

防止angular UI路由器重新加载组件

04
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文