Объедините два угловых контроллера

Question

У меня есть два контроллера, работающих на одном ng-повторе. Мой первый контроллер вводит данные, затем второй обновляет данные. Мне нужно объединить их, чтобы представление могло показать изменения.

Мой первый контроллер:

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> 

Как совместить эти два контроллера, так что мое мнение может автоматически обновлять при изменении данных?

UPDATE:

Моя служба:

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

Все хорошие практики в настоящее время избегать здесь, так что давайте его один за другим.

1. Практически во всех случаях должна быть служба для совершения http-звонков, для чтения, записи и обновления. Поэтому создайте службу.

2. Создайте для этого только один контроллер. Прежде чем говорить дальше, давайте поговорим о роли контроллера. Контроллер - это, в основном, View Model, клей между вашими службами данных и вашими представлениями. В буквальном смысле это не должно иметь никакой другой ответственности (за исключением картографирования и фильтрации данных, полученных от служб передачи данных в некоторых случаях). . Внесите свою службу в этот контроллер.

3. Переместить все ваши HTTP вызовы в службу

4. Есть массив или любой тип структуры данных в контроллере и связываются/интерполировать {{}} ваш взгляд с этим.

5. Вызовите метод обслуживания в вашем контроллере. Это может быть инициализация или событие. Зависит от вашей ситуации.

6. Что бы результат вы получите обратно от службы положить его в структуре данных в контроллере

7. услуги в идеале должны вернуть обещание так и в контроллере ответа всегда должны делать service.foo() .then (функция (данные){ });

привязывать данные в массиве или что вы имеете в контроллере

Answer 2

Мы хотим, чтобы оба контроллера для обозначения одной и той же 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);