À l'aide de profondément imbriqués objet JSON dans AngularJS - comportement étrange

J'essaie de comprendre comment AngularJS voit un objet à partir d'une profondément imbriqués JSON. Voici un exemple plunker. Les données proviennent du service et est affecté à $scope.data. Le code javascript semble vouloir me déclarer tous les niveaux de l'objet avant d'en faire usage, mais le référencement d'un niveau de profondeur à l'intérieur de l'objet à partir de la vue HTML fonctionne toujours, et en utilisant le niveau de profondeur dans une fonction plutôt des travaux. C'est plutôt incohérent.

Je ne sais pas si ma compréhension de $scope est manquant, ou si cela a quelque chose à faire avec la promesse d'objets. Conseiller s'il vous plaît?

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"
        ]
    }
}

OriginalL'auteur Ray Shan | 2013-05-04

  1. 3

    Votre $http requête est asynchrone.

    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
    };
});

    Puisque vous avez trois objets de portée qui s'appuient sur ces données, il serait préférable d'attribuer ces dans le retour d'appel.

    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;
      };
        });
    }};
});

    Si vous ne voulez pas les mettre sur le retour d'appel, vous pouvez également utiliser $de radiodiffusion() et $()

    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;
        };
    });
});
    Merci Mark. Je vois comment $http demande n'est pas fini. Mais comment puis-je carte objet JSON à $scope.data exactement une fois que c'est fini? J'ai pensé .success prendrait soin d'elle, mais apparemment pas. Si le JSON est grand avec beaucoup de niveaux, chaque niveau doivent être mappés manuellement et séparément?

    OriginalL'auteur Mark Coleman

  2. 3

    Ray, une autre option est le retour de l' $http.obtenez de l'appel depuis le son d'une promesse et d'utiliser l' .puis en fonction de() pour déclarer $champ d'application.nestedObj ou de toute autre chose que vous voulez faire avec les données une fois qu'il retourne.

    Voici mon exemple: http://plnkr.co/edit/GbTfJ9

    Vous pouvez en savoir plus sur les promesses Angulaire ici: http://docs.angularjs.org/api/ng.$q

    OriginalL'auteur bosco2010