Question

我正在关闭此问题，因为问题已得到解决，1问题是我使用$scope.data = data（而不是$scope.data = data.data）。另一个原因是因为我选择了答案。

我想要做的是从json文件中获取数据（一个对象）并将其分配给另一个变量（或者我认为是$ scope属性？）。

但是当我执行此操作时，在$ http.get（）调用发生之前，我已初始化的对象被分配给我的备用变量？

<!DOCTYPE html>
<html>
<head>
    <title>Playing with Angular</title>
    <script src="angular.min.js"></script>
</head>
<body data-ng-app="myApp" ng-controller="myCtrl" ng-init="">
    <p>{{ element1 }}</p>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $scope.data = {};
            $http.get("data.json").then(function(data) {
                $scope.data = data.data;
            });
            $scope.element1 = $scope.data.element1;
        });
    </script>
    </div>
</body>
</html>

data.json非常简单：

{
    "element1": {
        "sub1":1,
        "sub2":2
    }
}

我是否尝试在Angular中做一些不可能的事情？如果这个问题已在其他地方得到解答，请指出我。

修改

更进一步

我将上述$scope.data = data;更改为$scope.data = data.data;。这是我最大的问题（在我看来无论如何，没有其他人看到这一点的事实支持）。

现在我的问题是我正在寻找比Narain Mittal建议的更好的解决方案。我可以将$scope.element1 = $scope.data.element1;放在$http.get("data.json").then(function(data) {});内，它会起作用。这不是我想要的。

但是我要巩固我想要的东西，然后转到Code Review。谢谢你的帮助！

Answer 1

你需要在$scope.element1 = $scope.data.element1;函数回调中使用.then语句，如下所示：

 $http.get("data.json").then(function(data) {
       $scope.data = data;
       $scope.element1 = $scope.data.element1;
  });

它不适合你的原因是javascript执行不等待$http调用完成，然后继续进行赋值，除非你把它放在回调中。

Answer 2

数据可能是需要解析为json的字符串。

$scope.data = {}
$http.get("data.json").then(function(data) {
     $scope.data = angular.fromJson(data); 
});

我已对此进行了编辑，因为我认为更好的选择是执行上述操作并让您的模板钻取数据

<p>{{ data.element1 }}</p>

EDIT 对不起，这是fromJson

Answer 3

您需要像这样解析JSON数据

$http.get("data.json").then(function(data) {
       var data = JSON.parse(data)
       $scope.element1 = data.element1
  });

Angular在控制器中使用Json数据

3 个答案: