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

我认为有两种方法可以完成这项工作：

在浏览器中使用localCache或sessionCache来保存/检索两个视图所需的数据。有一个非常好的角度插件用于执行此操作here。每个控制器都通过缓存更新/检索数据。
在您的应用中创建一个自定义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
}

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

1 个答案: