Question

我有数据附加到控制器中的$ scope对象，就像这样

           $scope.result = [];
  $scope.jsonData = function () {
            var result = [];
            var keys = $scope.data[0];

            for (var i = 1; i < $scope.data.length; i++) {
                var item = {};
                item[keys[0]] = $scope.data[i][0];
                item[keys[1]] = $scope.data[i][1];
                item[keys[2]] = $scope.data[i][2];
                 $scope.result.push(item);
            }
            console.log($scope.result);
 };

我只能在使用ng-click指令

单击HTML中的按钮时访问此数据

<button ng-click="jsonData()">
                <table border="1">
                    <tr ng-repeat="x in result">
                        <td>{{x.Name}}</td>
                        <td>{{x.Age}}</td>
                        <td>{{x.Address}}</td>
                    </tr>
                </table>
            </button>

但是，我无法使用ng-init指令访问json数据。我做错了吗？

<div ng-init="jsonData()">
                <table border="1">
                    <tr ng-repeat="x in result">
                        <td>{{x.Name}}</td>
                        <td>{{x.Age}}</td>
                        <td>{{x.Address}}</td>
                    </tr>
                </table>
            </div>

Answer 1

为什么你这样使用ng-init？看一下文档：

ng-init documentation

这看起来不像ng-init的有效用例，除非你的控制器有更多的代码我看不到。

我会删除div上的ng-init，只需调用以下命令直接在控制器中运行该函数：

$scope.jsonData();

定义函数后。像这样：

$scope.result = [];
$scope.jsonData = function () {
        var result = [];
        var keys = $scope.data[0];

        for (var i = 1; i < $scope.data.length; i++) {
            var item = {};
            item[keys[0]] = $scope.data[i][0];
            item[keys[1]] = $scope.data[i][1];
            item[keys[2]] = $scope.data[i][2];
             $scope.result.push(item);
        }
        console.log($scope.result);
}; 
$scope.jsonData();

Answer 2

问题的可能原因是$('#table')指令在数据从服务器到达之前正在执行。

在控制器中， chain 来自将数据放在范围内的承诺：

ng-init

在MV *框架中，控制器创建模型，然后框架将模型映射到DOM。然后，框架从用户收集事件并通知控制器，然后控制器更新模型。

通过$http.get(url).then(function(response) { $scope.data = response.data; }).then(function() { $scope.jsonData(); });启动DOM，对模型进行更改违反了ZEN of Angular。

将DOM操作与app逻辑分离是一个非常好的主意。这大大提高了代码的可测试性。通过将应用程序排序和逻辑耦合到ng-init指令，代码变得脆弱，难以测试，难以维护且容易出错。

JSON数据未在div上的ng-init上加载，它在ng-click on按钮上加载

2 个答案: