So verwenden Sie angular.toJson auf einem Winkel-Controller oder Bereich

Question

Bitte beachten Sie mein folgendes jsFiddle-Beispiel, in dem ich versuche, ein Angular.js-Objekt in eine JSon-Darstellung mit angular.toJson zu schieben. Was ich bekomme, ist nur "$ SCOPE" als Ergebnis.

http://jsfiddle.net/K2GsS/12/

Was ich will ist es, die aktuellen Eigenschaften und Werten tun bekommen. In diesem Beispiel, was ich hofft, würde sehen

{ firstName: 'Frank', lastName: 'Williams' } 

Gibt es eine bessere Art und Weise an, dass Daten in JSon Form zu erhalten (dh nicht Umfang verwendet wird)? Offensichtlich konnte ich Hand eine Methode rollen, die die Werte nimmt und eine JSon-Darstellung hinausschiebt, aber wie der Controller ändert, würde auch diese Funktion, also würde ich lieber nur eine toJson-Methode aufrufen. Wer kennt den richtigen Weg? Danke im Voraus.

Answer 1

Ich kann sehen, dass Sie aus der jQuery Welt kommen, aber mit Angularjs Dinge sind immer viel einfacher, überprüfen Sie bitte diese jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

Mit Angularjs Sie Ereignisse viel anhängen können, viel einfacher:

<input type="button" ng-click="showJson()" value="Object To JSON" /> 

und dann in Ihrem Controller:

$scope.showJson = function() { 
    $scope.json = angular.toJson($scope.user); 
} 

in der Tat ist dies noch einfacher mit Angularjs Filter getan werden könnte, prüfen thi s jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/, die hat:

{{user | json}} 

Mit Angularjs Sie müssen zu „verlernen“ ein bisschen etwas von den jQuery Gewohnheiten, aber das ist gut, da die Dinge viel erhalten, viel einfacher, die meiste Zeit.

Answer 2

können Sie entweder Winkel in json Filter eingebaut verwenden als

{{ user | json }} 

wo Benutzer das Objekt Json ist stringfied OR Verwendung angular.toJson werden, um es zu JSON-formatierten String zu konvertieren. Bitte beachten Sie meine Geige https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

Da Sie gefragt, wie diese zu erhalten, ohne die $scope, hier ist ein angular 1.5.9 Beispiel mit Komponenten (sie wurden in Winkeln 1.5.8 eingeführt).

Dies würde Sie auch einfacher auf winkel 2 migrieren lassen. Und natürlich würden Sie alle diese Quellen in separate Dateien trennen.

Sie sollten TypeScript einen Versuch geben. Dies würde Sie Type Safety und eine Menge Zucker-Syntax und einen einfacheren Weg zur Programmierung in einer orientierten Weise bekommen. Sie können auch sehen, wo eine Methode definiert ist und welche Methoden und Eigenschaften sie hat.

var module = angular.module("settingsApp", []); 
 

 
module.service("userSettingsService", UserSettingsService); 
 

 
module.component("userDetails", { 
 
     template: ` 
 
     \t <input ng-model="$ctrl.userDetail.firstName" /> 
 
      <input ng-model="$ctrl.userDetail.lastName" /> 
 
      <input type="button" ng-click="$ctrl.showJson()" value="to JSON" /> 
 
      <hr/> 
 
      {{$ctrl.json}}`, 
 
     \t controller: UserDetailsController 
 
    }); 
 

 
UserSettingsService.$inject = ["$q"]; 
 
function UserSettingsService($q) { 
 
\t var _this = this; 
 
\t this.$q = $q; 
 
\t this.userDetails = [{ 
 
     firstName: "Frank", 
 
     lastName: "Williams" 
 
    }]; 
 
\t this.getSettings = function (id) { 
 
    \t return _this.$q.resolve(this.userDetails[id]); 
 
    } 
 
} 
 

 
UserDetailsController.$inject = ["userSettingsService"]; 
 
function UserDetailsController(userSettingsService) { 
 
\t var _this = this; 
 
\t var userId = 0; 
 
\t 
 
    this.userSettingsService = userSettingsService; 
 
    userSettingsService.getSettings(userId).then(function (data) { 
 
    \t _this.userDetail = data; 
 
    }); 
 
} 
 

 
UserDetailsController.prototype.showJson = function() { 
 
    this.json = angular.toJson(this.userDetail); 
 
} 
 

 

 
angular.bootstrap(document, ['settingsApp']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script> 
 

 
<user-details></user-details>