Comment utiliser angulaire.la méthode toJson sur un angulaire du contrôleur ou de la portée

Veuillez voir mon jsFiddle exemple où je suis en train de pousser Angular.js objet en JSon à l'aide de représentations angulaire.la méthode toJson. Ce que je reçois est juste "$CHAMP d'application" comme résultat.

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

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

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

Est-il un meilleur moyen d'obtenir que les données en JSon forme (c'est à dire non à l'aide de portée)? Évidemment, j'ai pu rouler une méthode qui prend les valeurs et repousse une représentation JSon, mais en tant que contrôleur des changements aussi cette fonction donc je préfère simplement appeler une méthode toJson type de méthode. Quelqu'un sait de la bonne façon de le faire? Merci à l'avance.

InformationsquelleAutor likestoski | 2012-08-05
  1. 69

    Je peux voir que vous êtes dans le jQuery monde, mais avec angular.js les choses deviennent beaucoup plus simples, veuillez cocher cette jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

    Avec angular.js vous pouvez joindre des événements beaucoup, beaucoup plus simple:

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

    et puis dans votre contrôleur:

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

    En fait, ce qui pourrait être fait encore plus facile avec angular.js filtres, cochez cette jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ qui a:

    {{user | json}}

    Avec angular.js vous avez besoin de "désapprendre" un peu de jQuery habitudes, mais c'est bon puisque les choses deviennent beaucoup plus facile la plupart du temps.

    InformationsquelleAutor pkozlowski.opensource
  2. 1

    Vous pouvez soit utiliser angulaire construit en json filtre

    {{ user | json }}

    où l'utilisateur est l'objet Json pour être stringfied OU
    utilisation angulaire.la méthode 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/

    InformationsquelleAutor deeps
  3. 1

    Puisque vous le demandez comment obtenir ce sans le $scope, voici un angular 1.5.9 exemple avec composants (ils ont été introduits dans angulaire 1.5.8).

    Cela vous permettra de migrer plus facile à angulaire 2, trop.
    Et bien vous avez de séparer toutes ces sources dans des fichiers séparés.

    Vous devriez donner TypeScript un essai. Ce serait que vous obtenez Type Safety et beaucoup de sucre, de syntaxe et d'une manière plus facile de faire de la programmation dans une méthode orientée. Vous pouvez également voir où une méthode est définie et quelles sont les méthodes et les propriétés qu'il possède.

    JS:

    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']);

    HTML:

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

<user-details></user-details>

    InformationsquelleAutor Stefan Rein