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

我使用Angular在表上显示一些数据，并使用$http从json异步加载数据。我有一个日期选择器，当用户选择不同的日期时，视图必须显示该日期的数据。 问题是，即使正确加载了新数据，视图也不会刷新。 以下是我简化的代码，仅包括重要的行：

<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>

以及控制器：

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>

像这样重构它

 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不为null，并且您使用了正确的rooturl，那么这将像charm一样工作

 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不为null，并且您使用了正确的rooturl，那么这将像charm一样工作

您不需要$timeout或$scope。$在使用$http服务时应用。 此功能已在$http服务中实现

确保您正确使用了控制器

这是一个代码示例：

单击“重新加载”时，您将看到更新了哪些数据

[更新]

由于问题更新，我认为原因是ng绑定html 再次查看小提琴-您可以看到2 ng重复

在1例中，我使用了ng bind 在2个例子中，我使用了ng绑定html 第二个是空的，您可以检查

你能试着做同样的事吗？如果你能得到同样的结果- 可能有帮助

您不需要$timeout或$scope。$在使用$http服务时应用。 此功能已在$http服务中实现

确保您正确使用了控制器

这是一个代码示例：

单击“重新加载”时，您将看到更新了哪些数据

[更新]

由于问题更新，我认为原因是ng绑定html 再次查看小提琴-您可以看到2 ng重复

在1例中，我使用了ng bind 在2个例子中，我使用了ng绑定html 第二个是空的，您可以检查

你能试着做同样的事吗？如果你能得到同样的结果-

---

可能有助于将loadDailyDataFromJSON放入angularservice，并将其注入控制器并开始使用。然后应用不是必需的，因为我在应用程序中使用了相同的概念。无需应用，它就可以完美地工作

将loadDailyDataFromJSON放在angularservice中，并将其注入控制器并开始使用它。然后应用不是必需的，因为我在应用程序中使用了相同的概念。如果没有apply，它可以完美地工作。

$http.get是否隐式应用了$apply，我不明白这里需要显式应用$apply的原因是什么？我尝试了，但出现了错误，因为$http已经在执行摘要过程。您是否获得了数据？是的，如果我正确地更新了词典日志。。但是视图没有刷新。我使用了您的代码，并像服务一样实现了它。。同样的结果。。我认为问题出在模板上..$http.get是否隐式应用了$apply，我不明白这里需要显式应用$apply的原因是什么？我尝试过，但它给出了错误，因为$http已经在进行摘要处理了。您是否获得了数据？如果我正确更新了词典，则是的。。但是视图没有刷新。我使用了您的代码，并像服务一样实现了它。。同样的结果。。我认为问题出在模板上。主要是，为什么要在控制器外部取出loadDailyDataFromJSON函数？您能在plunker/fiddle中重现这个问题吗？主要是，为什么要在控制器外部取出loadDailyDataFromJSON函数？你能在plunker/fiddle中重现这个问题吗？你正确使用控制器是什么意思？我的代码与你的代码相同，除了使用嵌套的ng-repeat。尝试将ng-bind html更改为ng-bind，并让我知道发生了什么。问题不存在，因为我有其他模板，使用相同的代码加载数据，并且视图也不会更新。正确使用控制器是什么意思？我的代码与您的代码相同，除了使用嵌套的ng-repeat。请尝试将ng bind html更改为ng bind，并让我知道发生了什么。问题不存在，因为我有其他模板，使用相同的代码加载数据和视图

---

也没有更新..我尝试将函数放入服务，结果相同。可能问题在于两个嵌套的ng repeat您的模板与我的模板具有相同的结构，具有嵌套和独立的ng repeat？我尝试将该函数放入服务中，结果相同。可能问题在于两个嵌套的ng repeat您的模板与我的模板具有相同的结构，具有嵌套和独立的ng repeat？