Question

我有两个控制器作用于一个ng-repeat。我的第一个控制器引入数据，然后第二个控制器更新数据。我需要将它们组合起来，以便视图可以显示更改。

我的第一个控制者：

app.controller("ProductsController", function($scope, $timeout, ProductsService) {
    ProductsService.productsListData().then(function(result) {
        $scope.productsList = result;
        console.log(result);
    });

我的第二个控制者：

app.controller('ReviewProductsController', function ($scope, $http) {

  $scope.hide_product = function (product_code) {

    $scope.message = "";

        var request = $http({
          method: "post",
          url: "/data/hideProduct.php",
          data: {
            product_code: product_code
          },
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });

  /* Check whether the HTTP Request is Successfull or not. */
  request.success(function (data) {
    $scope.message = "Product Hidden: "+data;
  });

  }

});

我的HTML：

<button ng-click="hide_product(product.product_code.S)" type="button" class="btn btn-warning btn-block">Hide</button>

如何组合这两个控制器，以便在数据更改时我的视图可以自动更新？

更新：

我的服务：

app.factory('ProductsService', function($q) {

return {
  productsListData: function() {

          var dynamodb = new AWS.DynamoDB({
                region: 'us-west-2',
                accessKeyId: 'accessKey',
                secretAccessKey: 'secretAccessKey',
            });
            var params = {
              TableName: 'productList',
              Limit: 100,
              FilterExpression:
                'attribute_not_exists(is_hidden)' + 'OR is_hidden = :bool_test',
          ExpressionAttributeValues: {
            ':bool_test': {"BOOL":false},
              }
            };

    var deferred = $q.defer();

          // ACCESS dynamodb
          dynamodb.scan(params, function(err, data) {
              if (err) {
                console.log(err, err.stack);
              } else { 
                //console.log(data);
            }

              deferred.resolve(data);

            });

    return deferred.promise;
  }
}

}); //.ProductsService

Answer 1

我们希望两个控制器引用相同的this并具有所有相应的依赖关系。我们可以通过bind控制器到父控制器并传递依赖关系来做到这一点。

function ProductsController($scope, $timeout, ProductsService) {
   ...
}

function ReviewProductsController($scope, $http) {
   ...
}

function CombinedController($scope, $timeout, $http, ProductsService) {
    ProductsController.bind(this, $scope, $timeout, ProductsService);
    ReviewProductsController.bind(this, $scope, $http);
}

app.controller("CombinedController", CombinedController);

Answer 2

所有良好做法都在这里避免，所以让我们一个接一个。

在几乎所有情况下都应该有一个服务来进行http调用，以便进行读，写，更新。所以创建一个服务。
为此创建一个且唯一的控制器。在进一步讨论之前，让我们谈谈控制器的作用。 Controller基本上是一个View Model，是数据服务和视图之间的粘合剂。它实际上不应该有任何其他责任（在某些情况下映射和过滤从数据服务接收的数据除外）所以在这个控制器中注入你的服务。
将所有http调用移至服务
在控制器中有一个数组或任何类型的数据结构，并使用它绑定/插入{{}}您的视图。
调用控制器中的服务方法。它可以是初始化或事件。取决于你的情况。
您从服务中获得的结果将其置于控制器的数据结构中
服务理想情况下应该返回一个promise，所以在响应中，控制器应该总是执行service.foo（）。然后（function（data）{}）;

将数据绑定到阵列或控制器中的任何内容

结合两个角度控制器

2 个答案: