Question

我正在使用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>

其中tableKPIColsInt和Float只是具有列名的字符串列表。

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（），但我得到了相同的结果。

[UPDATE]将函数放在控制器内部/外部或服务中不会改变任何东西。正在调用函数并更新变量中的数据。

可能模型有问题？当我做一个双嵌套循环时，我将两个信息都显示出来（一个遍历行，一个遍历字符串索引）。如果我把这段代码指定给控制器没有任何作用：

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

Answer 1

像这样重构

 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，那么这将像魅力一样工作

Answer 2

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

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

这是您的代码示例：

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

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

[增订]

适当的问题更新我认为原因是ng-bind-html 再看看小提琴 - 你可以看到2 ng-repeat

在1个案例中，我刚刚使用了ng-bind
在2个案例中，我使用了ng-bind-html

第二个是空的，你可以检查。

你能尝试做同样的事吗？如果你有相同的结果 - $sce 可能有帮助

Answer 3

将loadDailyDataFromJSON放入angularservice并将其注入您的控制器并开始使用它。然后申请不是必需的，因为我在我的申请中使用相同的概念。没有申请就完美无缺

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

3 个答案: