使用ui-router 1.0.6.每次我返回一个url(使用ui-sref)它都会重新加载控制器。我想避免这种情况,只在第一次访问控制器时加载它。在这个例子Plunkr中:每次我在Hello和About之间反复切换时,它都会记录控制台。
6tqwzwtp1#
它可以 Package 在父控制器中,以跟踪已经加载的对象下面是一个工作示例:Plnkr基本上,你创建另一个控制器,它包含一个空列表的对象:
myApp.controller('ModuleNumCtrl', function() { loadedCtrl = {}; });
然后通过将abstract属性设置为true,将其设置为parent:
var parentState = { abstract: true, name: 'parent', controller: 'ModuleNumCtrl' };
然后,通过在它们的名称前面加上“parent”**,将现有控制器设置为他的子级。
var helloState = { name: 'parent.hello', url: '/hello', template: '<h3>hello world!</h3>', controller: 'ModuleTwoCtrl' }; var aboutState = { name: 'parent.about', url: '/about', template: '<h3>Its the UI-Router hello world app!</h3>', controller: 'ModuleOneCtrl' }; $stateProvider.state(parentState); $stateProvider.state(helloState); $stateProvider.state(aboutState);
然后在每个你只想加载一次的控制器上,你可以在第一次加载它的时候把它添加到列表中,然后把你只想运行一次的代码放在if语句中:
myApp.controller('ModuleOneCtrl', function() { if (!loadedCtrl.one) { console.log("One"); } loadedCtrl.one = true; });
最后一件事,不要忘记用新的控制器名称更改HTML:
<a ui-sref="parent.hello" ui-sref-active="active">Hello</a> <a ui-sref="parent.about" ui-sref-active="active">About</a>
tgabmvqs2#
有一个ui-router插件可以做到这一点,名为sticky-states:https://github.com/ui-router/sticky-states我会在你的plunker上构建,但我找不到托管粘性状态的CDN。我找到了一个用于ui-router-extras的CDN,它相当于ui-router 0.x中的粘性状态,但对于1.x,它不起作用。你需要做的是1)添加插件。github上的sticky-states页面给出了如何执行此操作的说明,我将在这里复制:
import {StickyStatesPlugin} from "ui-router-sticky-states"; angular.module('myapp', ['ui.router']).config(function($uiRouterProvider) { $uiRouterProvider.plugin(StickyStatesPlugin); });
2)对于要保持活动状态的状态定义,添加属性sticky: true,如下所示:
sticky: true
var aboutState = { name: 'about', url: '/about', template: '<h3>Its the UI-Router hello world app!</h3>', controller : 'ModuleOneCtrl', sticky: true }
使用此标志,从状态移动到同级状态将不会退出旧状态,而是将其“停用”。控制器保持加载状态。如果您尝试进入旧状态,它将被“重新激活”。状态现在是活动的,但现有的控制器将被重用。请注意,如果执行以下操作之一,仍将退出粘滞状态:1)退出粘滞状态的父级2)直接激活粘滞状态的父状态所以你需要安排你的状态树,这样要么不会发生,要么只在你想要的时候发生。
2条答案
按热度按时间6tqwzwtp1#
它可以 Package 在父控制器中,以跟踪已经加载的对象
下面是一个工作示例:Plnkr
基本上,你创建另一个控制器,它包含一个空列表的对象:
然后通过将abstract属性设置为true,将其设置为parent:
然后,通过在它们的名称前面加上“parent”**,将现有控制器设置为他的子级。
然后在每个你只想加载一次的控制器上,你可以在第一次加载它的时候把它添加到列表中,然后把你只想运行一次的代码放在if语句中:
最后一件事,不要忘记用新的控制器名称更改HTML:
tgabmvqs2#
有一个ui-router插件可以做到这一点,名为sticky-states:https://github.com/ui-router/sticky-states
我会在你的plunker上构建,但我找不到托管粘性状态的CDN。我找到了一个用于ui-router-extras的CDN,它相当于ui-router 0.x中的粘性状态,但对于1.x,它不起作用。
你需要做的是
1)添加插件。github上的sticky-states页面给出了如何执行此操作的说明,我将在这里复制:
2)对于要保持活动状态的状态定义,添加属性
sticky: true
,如下所示:使用此标志,从状态移动到同级状态将不会退出旧状态,而是将其“停用”。控制器保持加载状态。如果您尝试进入旧状态,它将被“重新激活”。状态现在是活动的,但现有的控制器将被重用。
请注意,如果执行以下操作之一,仍将退出粘滞状态:
1)退出粘滞状态的父级
2)直接激活粘滞状态的父状态
所以你需要安排你的状态树,这样要么不会发生,要么只在你想要的时候发生。