Question

使用ui-router 1.0.6。

每当我返回一个url（使用ui-sref）时，它会重新加载控制器。我想避免这种情况，并且只在第一次访问控制器时加载控制器。

在此示例Plunkr中：每次在Hello和About之间重复切换时，都会记录控制台。

Answer 1

它可以包装在父控制器中以跟踪谁已经加载

以下是一个工作示例：Plnkr

基本上你创建另一个控制器，它包含一个带有空列表的对象：

myApp.controller('ModuleNumCtrl', function() {
  loadedCtrl = {};
});

将抽象属性设置为 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>

Answer 2

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页面提供了有关如何执行此操作的说明，我将在此处复制：

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）直接激活粘性状态的父级

所以你需要安排你的状态树，这样才不会发生，或者只在你想要的时候发生。

ui-router正在重新加载控制器

2 个答案: