javascript - 跨不同状态更新ui路由器解析的数据

我正在使用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"
            }
        }
    })
});

PS：
在研究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';

header.html

{{vm.data.title}}

HeaderController

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

将updateTitle方法代码更新如下。

vm.updateTitle = function() {

  // update the resolved data here so the header updates with new data.title
  vm.data.title =  "Another title";
};

Demo here

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

首选方法Plunkr