AngularJS:在保存到控制器之前从service获取更新的数据

AngularJS: Getting updated data from service before saving in controller

本文关键字：service 获取 更新 数据 保存 控制器 AngularJS      更新时间：2023-09-26

我正在研究AngularJS(1.4.2)应用程序的一个部分，并试图弄清楚如何在数据发生变化时从服务中获取控制器更新的数据。

我已经设置了这个活塞来演示这个问题。我希望这个例子看起来不太复杂，但在应用程序中，我有一个主表视图像一个在柱塞，但有五个选项卡，每个都有自己的部分html文件和控制器。现在有一个服务保存所有的字段数据，就像柱塞一样。其思想是，用户可以选中给定字段旁边的复选框来激活/停用该字段，因为它适合他们的数据，并且只有活动字段应该持久化在数据库中，因此服务将过滤后的数据返回给控制器。MainCtrl中的verifyFields()函数模拟了我的应用程序中的save函数，控制器应该用来自字段服务的更新数据填充newConnectionData对象。

我包含了一个pre，以显示当复选框被选中或未选中或输入值发生变化时，服务模型数据确实会更新。但是到目前为止，我一直无法在主控制器中更新数据。

我试图从这个堆栈溢出问题中单独合并plunker解决方案，建议从服务返回一个函数而不是一个原语:

test.service('fields', function() {
  ...
  var fields = this;
  return {
    ...
    activeOrders    : function() { return filteredOrders },
    activeShipment  : function() { return filteredShipment },
    activeActivity  : function() { return filteredActivity }
  }
test.controller('MainCtrl', ['$scope', '$rootScope', 'fields',
    function($scope, $rootScope, fields) {
  ...
  $scope.activeShipment = function () {
    return fields.activeShipment(); 
  };
  $scope.activeActivity = function () {
    return fields.activeActivity(); 
  };

…这个建议使用$watch:

$scope.$watch(function () { return fields.activeOrders() }, function (newVal, oldVal) {
  if (typeof newVal !== 'undefined') {
    $scope.activeOrders = fields.activeOrders();
  }
});
$scope.newConnectionData = {};
...
$scope.verifyFields = function () {
  $scope.newConnectionData = {
    orders    : $scope.activeOrders,
    shipment  : $scope.activeShipment(),
    activity  : $scope.activeActivity()
  }
  ...
}

…但到目前为止，它们都没有解决更新控制器中的数据的问题。如果你有任何建议，我将不胜感激。感谢您的宝贵时间!

让服务将数据公开为属性。不要使控制器的用法过于复杂。直接使用即可。如果需要以html格式显示数据，请在$scope中添加对该服务的引用。

test.service('fields', function() {
  ...
  var fields = this;
  return {
    ...
    activeOrders    : filteredOrders ,
    activeShipment  : filteredShipment ,
    activeActivity  : filteredActivity

In controller 

test.controller('MainCtrl', ['$scope', '$rootScope', 'fields',
    function($scope, $rootScope, fields) {
 $scope.fields = fields;
在模板

{{fields.activeShipment}}

看起来您可能需要重新计算_。其中与函数一起调用。

您的factory服务应该有这样的行:

activeOrders    : function() { return _.where(fields.ordersSchema, {active: true} ); },

最后的结果是

相关文章：