Question

我正在研究AngularJS（1.4.2）应用程序的一部分，并试图了解如何在数据更改时从服务获取控制器更新数据。

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

我已经包含一个pre来显示在选中和取消选中复选框或输入值更改时，服务模型数据确实会更新。但到目前为止，我还是无法在主控制器中更新数据。

我尝试将this stack overflow question that suggests returning a function rather than a primitive from the service：

中的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(); 
  };

...和this one that suggests using a $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()
  }
  ...
}

...但迄今为止都没有解决更新控制器中数据的问题。如果您有任何建议，我会非常感激。谢谢你的时间！

Answer 1

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

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

在控制器中

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

在模板中

{{fields.activeShipment}}

Answer 2

看起来您可能需要使用函数调用重新计算_.where。

您的factory服务会包含以下行：

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

Here就是我最终的目标。

AngularJS：在保存到控制器

2 个答案: