angularjs ui路由器正在重新加载控制器

sigwle7e  于 2023-03-28  发布在  Angular
关注(0)|答案(2)|浏览(130)

使用ui-router 1.0.6.
每次我返回一个url(使用ui-sref)它都会重新加载控制器。我想避免这种情况,只在第一次访问控制器时加载它。
在这个例子Plunkr中:每次我在Hello和About之间反复切换时,它都会记录控制台。

6tqwzwtp

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

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,如下所示:

var aboutState = {
  name: 'about',
  url: '/about',
  template: '<h3>Its the UI-Router hello world app!</h3>',
  controller : 'ModuleOneCtrl',
  sticky: true
}

使用此标志,从状态移动到同级状态将不会退出旧状态,而是将其“停用”。控制器保持加载状态。如果您尝试进入旧状态,它将被“重新激活”。状态现在是活动的,但现有的控制器将被重用。
请注意,如果执行以下操作之一,仍将退出粘滞状态:
1)退出粘滞状态的父级
2)直接激活粘滞状态的父状态
所以你需要安排你的状态树,这样要么不会发生,要么只在你想要的时候发生。

相关问题