ng-repeat 不使用 $scope.$watch 更新

Question

我需要一些帮助来显示来自 $watch 的 ng-repeat 指令中的更新结果

• ProductsCtrl 正在监视产品类型的变化，当它检测到变化时，它会搜索该类型的产品。
• 这肯定会检测到产品类型更改，并且我从 updateProducts 函数返回结果，但我返回的产品未显示。
• 我认为将 $scope.productService.products 映射到 ProductService.products 意味着它会自动更新。

我错过了什么吗？

谢谢。

controllers.js

.controller('ProductsCtrl',['$scope','ProductService', '$location', 'SessionDataService',    function($scope, ProductService, $location, SessionDataService){

  $scope.productService = ProductService;
  $scope.productService.products = ProductService.products;
  $scope.sessionDataService = SessionDataService;
  $scope.productType = SessionDataService.productType;

  $scope.$watch('productType', function(productTypeNew, productTypeOld){
      //update products
        console.log('ProductsCtrl: watch : New Val - '+ productTypeNew + ',     Old Val - ' + productTypeOld);
        $scope.productService.updateProducts(productTypeNew);
        console.log("ProductsCtrl: watch : Products retrieved - " +         $scope.productService.products);        
}, true);

}]);   

services.js

.factory('Product',['$resource', function($resource){
return $resource('/products/:id', {
    id: '@id'
});
}])
.factory('ProductService', ['Product', function(Product){
var products = [];

function updateProducts(productType){
    console.log("ProductService updateProducts with product type " + productType);
        Product.query({product_type: productType},
        function (data) {
            console.log("ProductService updateProducts returned " + data);
              var retProducts = data;
              angular.copy(retProducts, products);
              //console.log(retProducts);
            });
}
return {

    products: products,
    updateProducts: updateProducts

}}])

html

<div ng-controller="ProductsCtrl">
        <tr ng-repeat="product in productService.products">
            <td>{{product.title}}</td>
            <td>{{product.retailler}}</td>
        </tr>
    </div>

Answer 1

如果其他人遇到这种情况或有人可以解释原因 - 答案是将整个表格元素封装在控制器中，而不仅仅是 ng-repeat

解决方案：

<div ng-controller="ProductsCtrl">
    <table>
        <tr>
            <th>Product</th>
            <th>Retailler</th>
        </tr>

        <tr ng-repeat="product in products">
            <td>{{product.title}}</td>
            <td>{{product.retailler}}</td>
        </tr>
    </table>
    </div>

Answer 2

所以看起来console.log(retProducts); 确实打印了新值，但您的屏幕没有刷新。我认为这是因为您的复制代码在 $apply 中，所以您的复制后没有 $digest。我会将您的 angular.copy 包装在 $apply 中：

.factory('ProductService', ['Product', '$rootScope', function(Product){
var products = [];

function updateProducts(productType){
    console.log("ProductService updateProducts with product type " + productType);
        Product.query({product_type: productType},
        function (data) {$rootScope.$apply(function() {
            console.log("ProductService updateProducts returned " + data);
              var retProducts = data;
              angular.copy(retProducts, products);
              //console.log(retProducts);
            })});
}
return {

    products: products,
    updateProducts: updateProducts

}}])