Question

我有一个经典场景：左侧是过滤器，右侧是产品列表。用户点击过滤器，产品列表刷新。

我使用2个部分视图，两个视图共享同一个控制器。

<div class="row">
   <div ng-include="'/views/filters.html'"></div>
   <div ng-include="'/views/products.html'"></div>
</div>

控制器调用与弹性搜索对话的nodejs后端。

.controller('AppCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){

$http.get('/getAll')
    .success(function(data) {
        $scope.products = data.hits.hits;
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });

$scope.filterClick = function($event, filterClicked) {

    $http.get('/getSingleFilter', {
            params: {
                filter: filterClicked
            }
        })
        .success(function(data) {
            $timeout(function(){
              $scope.products = data;
              console.log($scope.products);
            });
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
}
}]);

对getAll的调用工作正常，products.html显示所有产品 getSingleFilter虽然没有刷新列表。我确实看到控制台中打印了正确的列表，但视图没有刷新。

我错过了什么？

Answer 1

您使用$timeout的具体原因是什么？根据您提供的代码判断，您不需要使用它。 $digest周期将触发$http周期，您的模型应与$http.get('/getAll')示例一样成功更新

.success(function(data) {
     $scope.products = data;       
})

Answer 2

好的，我发现了问题。我将2个部分放在同一部分中，并将代码放在

中

<div ng-controller='AppCtrl'>

它起作用了。
在我将ng-controller ='AppCtrl'指令显示在两个部分之前，我认为这是问题所在。我现在可以这样离开它，或创建2个控制器，然后有一个服务来共享数据。

$ scope更改后，部分视图不会刷新

2 个答案: