$scope 更改后部分视图不刷新答案

【问题标题】：Partial view doesn't refresh after $scope change$scope 更改后部分视图不刷新
【发布时间】：2016-03-02 00:12:12
【问题描述】：

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

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

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

控制器调用与 elasticsearch 对话的 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 虽然不会刷新列表。我确实看到控制台中打印了正确的列表，但视图没有刷新。

我错过了什么？

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

您使用$timeout 的具体原因有哪些？从您提供的代码来看，您不需要使用它。 $digest 循环将由 $http 触发，并且您的模型应该像您的 $http.get('/getAll') 示例一样成功更新

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

【讨论】：

我最初也是这么想的，所以我的第一次尝试只是 $scope.products = data，但它没有奏效。所以我尝试了 $timeout，没有骰子。
如果你确定返回了正确的数据，你可以试试 $scope.$apply(function($scope) { $scope.products = data; }) 这将启动摘要循环，如果它没有进行中
直接调用 $apply 会导致“$digest already in progress”错误。我尝试使用对 !$scope.$$phase 的检查来包装调用，但这也不起作用。

【解决方案2】：

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

中

<div ng-controller='AppCtrl'>

它奏效了。
在我让 ng-controller='AppCtrl' 指令出现在两个部分之前，我认为这就是问题所在。我现在可能就这样离开它，或者创建 2 个控制器，然后有一个服务来共享数据。

【讨论】：

即使是同一个控制器，每次使用它都会创建另一个继承自父控制器的$scope对象，所以如果数据没有存储在父控制器中（至少初始化为空对象），这是行不通的。