AngularJS视图在模型更改后未刷新

我在使用Angular的表格上显示了一些数据，我使用$ http从json异步加载它。我有一个日期选择器，当用户选择不同的日期时，视图必须显示该日期的数据。问题是，即使新数据正确加载，视图也不会刷新。这里是我的代码（我包括简化的唯一重要行）：AngularJS视图在模型更改后未刷新

<tbody> 
    <tr ng-repeat="row in tableKPI"> 
     <td ng-repeat="index in tableKPIColsInt">{{ row[index]}}</td> 
     <td ng-repeat="index in tableKPIColsFloat">{{ row[index] | number:2}}</td> 
    </tr> 
</tbody>

凡tableKPIColsInt和浮动只是列名字符串列表。

loadDailyDataFromJSON = function ($plantName,$http,$scope,$timeout) { 

    var formattedDate = dateFormat($scope.selectedDate,"yyyy-mm-dd"); 

    $http.get("json/"+formattedDate+".json") 
    .then(function (response) { 
     $scope.tableKPI = response.data[$plantName]; 
    }, 
    function(error) { 
     $scope.tableKPI = {}; 
     console.log("No data for KPI for "+formattedDate); 
    }); 

    // tried also to call $apply 
    $timeout(function() { $scope.$apply();}, 500); 
};

而且控制器：

app.controller("tableController", function($scope,$routeParams,$rootScope,$http,$timeout){ 
    $scope.tableKPI = {}; 
    $scope.reloadData = function(){ 
     loadDailyDataFromJSON($rootScope.currentPlant,$http,$scope, $timeout); 
    }; 

}

此代码的工作，我第一次加载页面，那么如果我更改了新数据是否正确的日期，但认为不会改变。我知道有很多类似的问题，但该解决方案对我无效。我试着调用$ scope。$ apply（），但它给了我已经在进行中的错误摘要..我试着在超时后调用$ apply（），但是我获得了相同的结果。

[更新]将函数放入控制器内部或外部，并不会改变任何内容。调用函数并更新变量中的数据。

也许模型有问题吗？由于我做了一个双重嵌套的循环，我将两个信息都显示出来（一个迭代遍历行，一个遍历字符串索引）。如果我把这个代码指定控制器没有什么作品：

<tbody ng-controller="dailyCtrl as dc"> 
    <tr ng-repeat="row in dc.tableImbalance"> 
     <td ng-model="row[index]" ng-repeat="index in dc.tableImbalanceCols" ng-bind-html="row[index].toString()"></td> 
    </tr> 
</tbody>

来源

2017-03-27 Alessio Rossotti

首先，为什么你拿出'loadDailyDataFromJSON'函数以外的控制器？你能在plunker/fiddle中重现这个问题吗？ –

重构像这样

app.controller("tableController", function($scope,$routeParams,$rootScope,$http,$timeout){ 
    $scope.tableKPI = {}; 
    $scope.reloadData = function(){ 
     loadDailyDataFromJSON($rootScope.currentPlant,); 
    }; 


    // assuming the function is in same file as controller 
    loadDailyDataFromJSON = function ($plantName) { 

     var formattedDate = dateFormat($scope.selectedDate,"yyyy-mm-dd"); 

     $http.get("json/"+formattedDate+".json") 
     .then(function (response) { 
      $scope.tableKPI = response.data[$plantName]; 
     }, 
     function(error) { 
      $scope.tableKPI = {}; 
      console.log("No data for KPI for "+formattedDate); 
     }); 

    }; 

}

但是，如果你喜欢的服务方式

app.service("testService", function($http){ 

this.loadDailyDataFromJSON = function ($username) { 

    var endpoint = "rooturl"+"json/"+formattedDate+".json"; 
     return $http({ 
     method: 'get', 
     url: endpoint 
     }); 
    }; 

}

并在控制器

app.controller("tableController", function($scope,$routeParams,$rootScope,testService{ 
     $scope.tableKPI = {}; 
     $scope.reloadData = function(){ 
      var formattedDate = dateFormat($scope.selectedDate,"yyyy-mm-dd"); 

      testService.loadDailyDataFromJSON (formattedDate) 
      .then(function (response) { 
       $scope.tableKPI = response.data[$plantName]; 
      }, 
      function(error) { 
       $scope.tableKPI = {}; 
       console.log("No data for KPI for "+formattedDate); 
      }); 
     }; 


    }

如果formattedDate不为空，你使用了正确的rooturl那么这会像魅力

来源

2017-03-27 07:46:08

'$ http.get'隐式地执行'$ apply'，我不明白在这里需要明确的'$ apply'是什么？ –

我试过了，但它给出错误，因为$ http已经在进行摘要过程 –

你会得到数据吗？ –

当您使用$http服务不需要$timeout或$scope.$apply。此功能已在$http服务内部实施。

确保您正确使用了您的控制器。

这是你的代码的例子：

http://jsfiddle.net/jgyombzg/5/

当你点击刷新，您将看到数据更新的东西。

[增订]

由于问题的更新，我认为原因是ng-bind-html 再看看进入小提琴 - 你可以看到1例2 ng-repeat

我只是用ng-bind
在我使用了两种情况ng-bind-html

二是空的a你可以检查。

你可以试试吗？如果你有同样的结果 - $sce 可能有助于

来源

2017-03-27 08:16:55

你是什么意思，你用你的控制器吗？我的代码和你的一样，期望我使用嵌套的ng-repeat。 –

尝试为'ng-bind'更改'ng-bind-html'并让我知道会发生什么。 –

这个问题是不存在的，因为我有其他模板，加载数据相同的代码和视图并没有得到更新。 –

认沽loadDailyDataFromJSON在angularservice并注入同放入您的控制器，并开始使用它。那么申请并不是必需的，因为我在我的申请中使用了相同的概念。这是完全没有适用的工作

来源

2017-03-27 08:17:23 Sujatha

我试着将该功能放入一个服务，相同的结果。也许问题是两个嵌套的ng-repeat –

你的模板与我的嵌套和INDEPENDENT ng-repeat有相同的结构吗？ –

AngularJS视图在模型更改后未刷新

回答

相关问题