Mit tief verschachtelten JSON-Objekt aus in der AngularJS - seltsames Verhalten

Ich versuche zu verstehen, wie AngularJS sieht ein Objekt aus einer tief verschachtelten JSON. Hier ist ein Beispiel, plunker. Die Daten stammen aus service-und zugeordnet ist $scope.data. Der javascript-code scheint nicht zu wollen, mir zu erklären, jede Ebene der Objekt zuerst vor der Verwendung, sondern verweisen auf einen tiefen Pegel in-Objekt aus der HTML-Ansicht immer funktioniert, und mit dem tiefen Ebene in eine Funktion ein bisschen arbeiten. Es ist eher inkonsequent.

Ich bin mir nicht sicher, ob mein Verständnis von $scope fehlt, oder ob dies etwas zu tun mit Versprechen von Objekten. Beraten Sie bitte?

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

InformationsquelleAutor Ray Shan | 2013-05-04

  1. 3

    Ihre $http Anfrage asynchron ist.

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

    Da haben Sie drei scope-Objekte, die sich darauf verlassen, dass die Daten am besten wäre es, ordnen Sie diese in der call-back.

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

    Wenn Sie nicht wollen, um alles bis auf den Anruf zurück, könnten Sie auch $broadcast() und $()

    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;
        };
    });
});
    Dank Mark. Ich sehe, wie $http Anfrage ist noch nicht beendet. Aber wie kann ich die Karte JSON-Objekt zu $scope.data genau, sobald es fertig ist? Ich dachte .success aufpassen würde, es aber offensichtlich nicht. Wenn das JSON ist groß mit vielen Ebenen, wird jede Ebene abgebildet werden manuell und getrennt?

    InformationsquelleAutor Mark Coleman

  2. 3

    Ray, eine weitere option ist die Rückgabe der $http.Holen Sie sich nennen, da es ein Versprechen, und verwenden Sie die .dann () - Funktion zu deklarieren $Umfang.nestedObj oder wollen, nichts zu tun mit den Daten, sobald es gibt.

    Hier mein Beispiel: http://plnkr.co/edit/GbTfJ9

    Lesen Sie mehr über verspricht in Winkel-hier: http://docs.angularjs.org/api/ng.$q

    InformationsquelleAutor bosco2010

Schreibe einen Kommentar