web-dev-qa-db-fra.com

Comment utiliser angular.toJson sur un contrôleur angulaire

Veuillez consulter mon exemple suivant jsFiddle où je tente d'insérer un objet Angular.js dans une représentation JSon à l'aide de angular.toJson. Ce que j'obtiens, c'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, j'espère voir 

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

Existe-t-il un meilleur moyen d'obtenir ces données sous forme JSon (c'est-à-dire de ne pas utiliser scope)? Évidemment, je pourrais lancer à la main une méthode qui prend les valeurs et affiche une représentation JSon mais, à mesure que le contrôleur change, la fonction change aussi, de sorte que je préfère simplement appeler une méthode de type toJson. Quelqu'un sait-il comment faire cela? Merci d'avance.

javascriptangularjs
25
likestoski

Je vois que vous venez du monde jQuery, mais avec angular.js les choses deviennent beaucoup plus simples, veuillez vérifier ceci jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

Avec angular.js, vous pouvez attacher des événements de manière beaucoup plus simple:

 <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 ceci jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ qui a:

{{user | json}}

Avec angular.js, vous devez "désapprendre" un peu des habitudes jQuery, mais c’est bien, les choses deviennent beaucoup, beaucoup plus faciles la plupart du temps.

69
pkozlowski.opensource

Vous pouvez utiliser le filtre json intégré angulaire comme

{{ user | json }}

où utilisateur correspond à l'objet Json à soumettre à la chaîne OU utilisez angular.toJson pour le convertir en chaîne au format JSON. Veuillez vous référer à mon violon https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

1
deeps

Puisque vous avez demandé comment obtenir ceci sans le $scope, voici un exemple angular 1.5.9 avec components (ils ont été introduits dans angular 1.5.8).

Cela vous permettrait de migrer plus facilement vers angular 2, aussi . Et bien sûr, vous sépareriez toutes ces sources dans des fichiers séparés.

Vous devriez essayer TypeScript. Cela vous donnerait Type Safety et beaucoup de syntaxe de sucre et un moyen plus facile de programmer de manière orientée. Vous pouvez également voir où une méthode est définie ainsi que ses méthodes et propriétés.

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>

1
Stefan Rein