Angular $ scope对象未在视图中更新

Question

我有一个基于类别过滤的大型产品对象。选择过滤器后，将使用该过滤器调用我的getAllProducts()函数。此功能还在我的视图中为$scope.products设置了ng-repeat <li>。

选择每个类别后，我是控制台记录返回的产品对象的长度，并看到该对象正确更新，但我的视图不会更改。有谁看到这里有什么问题？

视图：

  <li ng-repeat="product in products track by $index">
      <img ng-model="category" class="{{product.custom.category_code}}" src="/img/product-all/{{product.custom.sku}}PF1.png">
      <p class="name">{{product.custom.name1}}</p>
      <p class="price">{{product.price}}</p>
  </li>

  <li class='has-sub first-menu'><a href='/scroll'><span>Filter By Category:</span></a>
     <ul class="sub-menu">
        <li ng-repeat="cat in filterCategory">
           <a href='/scroll' data-category="all" ng-click="setFilter('category', cat)">
              <span>{{cat}}</span>
           </a>
        </li>
     </ul>
  </li>
  <li class='has-sub first-menu'><a href='/scroll'><span>Filter By Color:</span></a>
     <ul class="sub-menu">
        <li ng-repeat="color in filterColor">
           <a href='/scroll' data-category="all" ng-click="setFilter('color', color)">
              <span>{{color}}</span>
           </a>
        </li>
     </ul>
  </li>
  <li class='has-sub first-menu'><a href='/scroll'><span>Filter By Season:</span></a>
     <ul class="sub-menu">
        <li ng-repeat="season in filterSeason">
           <a href='/scroll' data-category="all" ng-click="setFilter('season', season)">
              <span>{{season}}</span>
           </a>
        </li>
     </ul>
  </li>

控制器：

    $scope.setFilter = function(type, filter){
        type = type;
        filter = filter;
        getProducts(type, filter);
    }
    var getProducts = function(type, filter){
        productFactory.getAllProducts()
            .then(function(){
                $timeout( function(){
                    var allProducts = productFactory.products;
                    var filterProducts;
                    switch (type){
                        case "category":
                            filterProducts = $filter('filter')(allProducts, {custom:{category_code:filter}});
                            break;
                        case "color":
                            filterProducts = $filter('filter')(allProducts, {custom:{color_code:filter}});
                            break;
                        case "season":
                            filterProducts = $filter('filter')(allProducts, {custom:{season:filter}});
                            break;
                        default:
                            filterProducts = productFactory.products;
                    }
                    $scope.products = _.uniq(filterProducts, function(p){ return p.custom.sku; });
                    console.log($scope.products.length);
                }, 700);
            });
    }

工厂：

var getAllProducts = function(){
        return $http.get('/api/scroll?page='+pageNumber)
            .then(function(response) {
                angular.extend(products,response);
                for (var i = products.data.results.length - 1; i >= 0; i--) {
                    productsData.push(products.data.results[i]);
                };
                while (pageNumber <= products.data.pages){
                    getAllProducts();
                    pageNumber++;
                }
                for (var i = productsData.length - 1; i >= 0; i--) {
                    if (filterCategory.indexOf(productsData[i].custom.category_code) == -1) {
                        filterCategory.push(productsData[i].custom.category_code);
                    };
                    if (filterColor.indexOf(productsData[i].custom.color_code) == -1) {
                        filterColor.push(productsData[i].custom.color_code);
                        // $filter('orderBy')(filterColor, '+');
                    };
                    if (filterSeason.indexOf(productsData[i].custom.season) == -1) {
                        filterSeason.push(productsData[i].custom.season);
                    };
                };
                var deferred = $q.defer();
                deferred.resolve(response);
                products = productsData;
                return deferred.promise;

            });
    };

Answer 1

好像你错过了从服务方法返回数据，它应该返回格式化的数据。当你已经使用正在返回承诺的$http时，无需再次创建承诺。

然后在你的控制器getAllProducts().then内部，函数参数将包含从服务方法返回的数据。

<强>工厂

var getAllProducts = function() {
    return $http.get('/api/scroll?page=' + pageNumber)
    .then(function(response) {
      angular.extend(products, response);
      for (var i = products.data.results.length - 1; i >= 0; i--) {
        productsData.push(products.data.results[i]);
      };
      while (pageNumber <= products.data.pages) {
        getAllProducts();
        pageNumber++;
      }
      for (var i = productsData.length - 1; i >= 0; i--) {
        if (filterCategory.indexOf(productsData[i].custom.category_code) == -1) {
          filterCategory.push(productsData[i].custom.category_code);
        };
        if (filterColor.indexOf(productsData[i].custom.color_code) == -1) {
          filterColor.push(productsData[i].custom.color_code);
          // $filter('orderBy')(filterColor, '+');
        };
        if (filterSeason.indexOf(productsData[i].custom.season) == -1) {
          filterSeason.push(productsData[i].custom.season);
        };
      };
      return productsData; //return data from here

    });
};

<强>控制器

var getProducts = function(type, filter) {
  productFactory.getAllProducts()
  .then(function(products) { //<--added data parameter here
    var allProducts = products; //<--assigned data to all products
    var filterProducts;
    switch (type) {
      case "category":
        filterProducts = $filter('filter')(allProducts, {
          custom: {category_code: filter}
        });
        break;
      case "color":
        filterProducts = $filter('filter')(allProducts, {
          custom: {color_code: filter}
        });
        break;
      case "season":
        filterProducts = $filter('filter')(allProducts, {
          custom: {season: filter}
        });
        break;
      default:
        filterProducts = productFactory.products;
    }
    $scope.products = _.uniq(filterProducts, function(p) {
      return p.custom.sku;
    });
    console.log($scope.products.length);
  });
}