更新不同状态的 UI 路由器解析数据

Update ui-router resolved data across different states

本文关键字：路由器 数据 UI 状态 更新      更新时间：2023-09-26

我正在使用ui-router来管理我网站的各种状态。我使用 resolve 将数据传递给header和home控制器，如以下代码所示。因此，现在我需要更新HomeController解析数据的值，此更改也应反映到HeaderController。

var myapp = angular.module('myapp', ["ui.router"]);
myapp.service("DataService", [function() {
  var data = { title: 'Some Title' };
  this.get = function() {
    return data;
  };
}]);
myapp.controller("HeaderController", ["data", function(data) {
  var vm = this;
  vm.title = data.title;
}]);
myapp.controller("HomeController", ["data", function(data) {
  var vm = this;
  vm.title = data.title;
  vm.updateTitle = function() {
    // update the resolved data here so the header and home view 
    // updates with new data.title
    data = { title: "Another title" };
    // i know i can do vm.title = data.title; to update home view. 
    // But would be nice to globally update and reflect that change 
    // on all controllers sharing the same resolved data
  };
}]);
myapp.config(function($stateProvider){
$stateProvider
    .state({
        name: "root",
        abstract: true,
        views: {
            "header": {
                templateUrl: "header.html",
                controller: 'HeaderController as vm'
            }
        },
        resolve: {
          data: ['DataService', function(DataService) {
            return DataService.get();
          }]
        }
    })
    .state({
        name: "root.home",
        url: "",
        views: {
            "content@": {
                templateUrl: "home.html",
                controller: "HomeController as vm"
            }
        }
    })
});

附注：在研究resolve之前，我直接将服务注入控制器，所以请不要建议这样做。

编辑：Plunkr更新，现在按预期工作。

这是plunkr的链接

经验教训：

Angular 仅监视分配给范围的对象，并保留对象的单独引用。我的意思是：

data = { title: 'some title' };
vm.data = data;
vm.title = data.title;
data.title = 'another title';
{{vm.title}} // some title
//

/

data = { title: 'some title' };
vm.data = data;
data.title = 'another title';
{{vm.data.title}} // another title

您应该利用变量引用，您应该将HeaderController数据绑定到vm.data = data

另一个不正确的事情是data = { title: "Another title" };这将创建一个具有新引用的数据对象，并且服务对象的引用将丢失。与其这样，不如做data.title = 'Another title';

标题.html 

{{vm.data.title}}

标头控制器

myapp.controller("HeaderController", ["data", function(data) {
  var vm = this;
  vm.data = data;
}]);

将更新标题方法代码更新到下面。

vm.updateTitle = function() {
  // update the resolved data here so the header updates with new data.title
  vm.data.title =  "Another title";
};

在这里演示

我想说的是，与其玩实际的对象引用，不如在工厂中setTitle函数，从updateTitle调用将更新标题的 setter 方法。但在这种情况下，您需要在两个控制器上再次添加服务引用。如果是静态数据，则无需通过具有解析函数来传递它们。我喜欢将服务注入我的控制器中，然后通过其getter和setter处理数据。

首选方法 Plunkr

相关文章：