Comment utiliser angular.toJson sur un contrôleur angulaire ou une portée

S'il vous plaît, consultez mon exemple jsFiddle suivant où j'essaie de pousser un objet Angular.js dans des représentations JSon en utilisant angular.toJson. Ce que je reçois est simplement "$ SCOPE" comme résultat.

Http://jsfiddle.net/K2GsS/12/

Ce que je veux faire, c'est obtenir les propriétés et les valeurs actuelles. Dans cet exemple, ce que j'espère voir est

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

Existe-t-il une meilleure façon d'obtenir ces données sous forme JSon (c'est-à-dire ne pas utiliser la portée)? Évidemment, je pourrais distribuer une méthode qui prend les valeurs et supprime une représentation JSon, mais comme le contrôleur change aussi, cette fonction fonctionnerait-elle, alors je préférerais simplement appeler une méthode de type toJson. Quelqu'un connait-il la manière appropriée de le faire? Merci d'avance.

Je peux voir que vous venez du monde jQuery, mais avec angular.js les choses deviennent beaucoup plus simples, vérifiez ce jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

Avec angular.js, vous pouvez attacher des événements beaucoup, beaucoup plus simples:

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

Et ensuite dans votre contrôleur:

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

En fait, cela pourrait être encore plus facile avec les filtres angular.js, vérifiez ce jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ qui a:

 {{user | json}}

Avec angular.js, vous devez "déconseiller" quelques-unes des habitudes de jQuery, mais cela est bon car les choses sont beaucoup plus faciles la plupart du temps.

Vous pouvez soit utiliser le filtre jumelé intégré angulaire comme

 {{ user | json }}

Où l'utilisateur est l'objet Json à être stringfied OU utiliser angular.toJson pour le convertir en chaîne formatée JSON. Veuillez vous référer à mon violon https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Comme vous avez demandé comment obtenir cela sans la $scope , voici un exemple angular 1.5.9 avec des composants (ils ont été introduits dans 1.5.8 angulaire).

Cela vous permettrait de migrer plus facilement vers 2 angulaires . Et bien sûr, vous séparerez toutes ces sources en fichiers distincts.

Vous devriez essayer TypeScript . Cela vous procurerait Type Safety et beaucoup de syntaxe de sucre et un moyen plus facile de programmation de manière orientée. De plus, vous pouvez voir où une méthode est définie et quelles méthodes et propriétés elle possède.

 var module = angular.module("settingsApp", []); module.service("userSettingsService", UserSettingsService); module.component("userDetails", { template: ` <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}}`, controller: UserDetailsController }); UserSettingsService.$inject = ["$q"]; function UserSettingsService($q) { var _this = this; this.$q = $q; this.userDetails = [{ firstName: "Frank", lastName: "Williams" }]; this.getSettings = function (id) { return _this.$q.resolve(this.userDetails[id]); } } UserDetailsController.$inject = ["userSettingsService"]; function UserDetailsController(userSettingsService) { var _this = this; var userId = 0; this.userSettingsService = userSettingsService; userSettingsService.getSettings(userId).then(function (data) { _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>