ui router - 将数据从控制器传递到另一个视图

Question

在不注入服务的情况下，如何将数据从一个视图的控制器传递到另一个视图。我参考了数据、参数、解析、父子概念，但我无法弄清楚。

示例如下：

路由：

  $stateProvider
    .state('route1', {
      url: "/route1",
      templateUrl: "route1.html",
      controller: "firstCtrl"
    })
    .state('route2', {
      url: "/route2",
      templateUrl: "route2.html",
      controller: "secondCtrl"
    })

观看次数：

route1.html

 view 1 : {{firstCtrlValue}}

route2.html

 View 2: <input type="text" ng-model="firstCtrlValue"/>  <!-- Of course, It won't work -->
 <a ui-sref="route1">go to route 1</a>
 <a ui-sref="route2">go to route 2</a>

控制器：

.controller('firstCtrl', function($scope) {
  $scope.firstCtrlValue = "I am from first";
})
.controller('secondCtrl', function($scope) {
  $scope.secondCtrlValue = "Hey I'm from 2nd Ctrl";
});

我想要什么：如果我从 route2 更改模型值，它必须影响 route1。

这里是link

Answer 1

我看到了两种方法来完成这项工作：

1. 在浏览器中使用localCache 或sessionCache 来保存/检索两个视图都需要的数据。有一个非常好的角度插件可以做到这一点here。每个控制器都通过缓存更新/检索数据。

2. 在您的应用程序中创建一个自定义 service，该应用程序具有用于保存和检索数据的 API。每当有新值存储在服务中时，使用$rootScope.$broadcast() 将更改通知其他控制器，以便它可以获取新值。

如果这两种方法都不是您想要的，您可以尝试在您的状态配置中放置一个resolve {} 块，如下所示：

$stateProvider
    .state('route1', {
      url: "/route1",
      templateUrl: "route1.html",
      controller: "firstCtrl",
      resolve: {
         DataService: 'DataService',
         dataObj: function(DataService) {
            return DataService.getDataObj(); // a promise (e.g. return $http.get(url)) 
         }
      }
    })

然后在你的控制器firstCtrl，你需要注入dataObj：

function firstCtrl($scope, dataObj) {
  //TODO: use dataObj as a value or object however you want
}

在您的DataService 中，您需要确保函数getDataObj() 返回一个承诺，例如：

function getDataObj() {
  var deferred = $q.defer();
  deferred.solve({key: "value..."});
  return deferred.promise; //can also be return $http.get(url) of that sort
}