3

我试图了解 AngularJS 如何从深度嵌套的 JSON 中看到对象。这是一个示例 plunker。数据来自服务并分配给$scope.data. javascript 代码似乎希望我在使用之前先声明对象的每个级别，但是从 HTML 视图中引用对象内部的深层总是有效的，并且在函数中使用深层还挺有效。比较不协调。

我不确定我$scope是否缺乏对的理解，或者这是否与承诺对象有关。请指教？

HTML

<body ng-controller="MainCtrl">
  Referencing nested obj in view works:
  {{data.level1.level2}}
  <br>
  Using nested obj within declared scope var doesn't work:
  {{nestedObj}}
  <br>
  Using nested obj in a function works but throws TypeError:
  {{getLen()}}
</body>

Javascript

var app = angular.module('app', []);

app.factory('JsonSvc', function ($http) {
  return {read: function(jsonURL, scope) {
        $http.get(jsonURL).success(function (data, status) {
            scope.data = data;
        });
    }};
});

app.controller('MainCtrl', function($scope, JsonSvc) {
    JsonSvc.read('data.json', $scope);

    // Using nested obj within declared scope var doesn't work
    // Uncomment below to break whole app
    // $scope.nestedObj = $scope.data.level1.level2;

    // Using nested obj in a function works but throws TypeError
    // Declaring $scope.data.level1.level2 = [] first helps here
    $scope.getLen = function () {return $scope.data.level1.level2.length};
});

JSON

{
    "level1": {
        "level2": [
            "a",
            "b",
            "c"
        ]
    }
}
4

2 回答 2

3

Ray，另一种选择是返回 $http.get 调用，因为它是一个承诺，并使用 .then() 函数来声明 $scope.nestedObj 或其他任何你想在它返回后对数据执行的操作。

这是我的例子： http: //plnkr.co/edit/GbTfJ9

你可以在这里阅读更多关于 Angular 的承诺：http: //docs.angularjs.org/api/ng.$q

于 2013-06-05T11:57:11.710 回答
3

您的$http请求是异步的。

app.controller('MainCtrl', function($scope, JsonSvc) {
    JsonSvc.read('data.json', $scope);

    //$scope.data.level1.level2 doesn't exist yet at this point in time 
    //and throws an exception
    $scope.nestedObj = $scope.data.level1.level2;

    //$scope.data.level1.level2 doesn't exist yet at this point in time 
    //and throws an exception
    //once Angular does dirty checking this one will work since the 
    //$http request finished.
    $scope.getLen = function () {
        return $scope.data.level1.level2.length
    };
});

由于您有三个依赖于该数据的范围对象，因此最好在回调中分配这些对象。

app.factory('JsonSvc', function ($http) {
  return {read: function(jsonURL, scope) {
        $http.get(jsonURL).success(function (data, status) {
            scope.data = data;
      scope.nestedObj = scope.data.level1.level2;
      scope.getLen = function () {
        return scope.data.level1.level2.length;
      };
        });
    }};
});

如果您不想在回调中全部设置，您也可以使用$broadcast()and$on()

app.factory('JsonSvc', function ($http, $rootScope) {
    return {
        read: function (jsonURL, scope) {
            $http.get(jsonURL).success(function (data, status) {
                scope.data = data;
                $rootScope.$broadcast("jsonDone");
            });
        }
    };
});

app.controller('MainCtrl', function ($scope, JsonSvc) {
    JsonSvc.read('data.json', $scope);
    $scope.name = "world";
    $scope.$on("jsonDone", function () {
        $scope.nestedObj = $scope.data.level1.level2;
        $scope.getLen = function () {
            return $scope.data.level1.level2.length;
        };
    });
});
于 2013-05-04T18:41:51.247 回答