Come utilizzare angular.toJson su un controller angolare o ambito

Question

Vedere il seguente esempio jsFiddle in cui sto cercando di inviare un oggetto Angular.js in una rappresentazione JSon utilizzando angular.toJson. Quello che ottengo è solo "$ SCOPE" come risultato.

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

Quello che voglio fare è ottenere le proprietà ei valori correnti. In questo esempio, quello che mi auguro di vedere è

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

C'è un modo migliore per arrivare a che i dati in forma JSON (cioè non utilizzando campo di applicazione)? Ovviamente potrei trasmettere un metodo che prende i valori e spinge fuori una rappresentazione JSon, ma come cambia il controller anche questa funzione, quindi preferirei semplicemente chiamare un metodo di tipo toJson. Qualcuno sa del modo corretto per farlo? Grazie in anticipo.

Answer 1

Vedo che si proviene dal mondo jQuery, ma con angular.js le cose stanno molto più semplice, si prega di controllare questo jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

Con angular.js è possibile allegare gli eventi molto, molto più semplice:

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

e poi nel controllore:

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

in realtà questo potrebbe essere fatto ancora più facile con angular.js filtri, controllare Thi s jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ quali ha:

{{user | json}} 

Con angular.js è necessario "disimparare" un po 'alcune delle abitudini jQuery, ma questo è un bene dal momento che le cose si fanno molto, molto più facile la maggior parte del tempo.

Answer 2

è possibile utilizzare angolare integrato nel filtro json come

{{ user | json }} 

dove utente è l'oggetto JSON da stringfied OR uso angular.toJson per convertirlo in stringa in formato JSON. Si prega di fare riferimento al mio violino https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

Dal momento che hai chiesto come ottenere questo senza il $scope, qui è un esempio angular 1.5.9 con componenti (sono stati introdotti in angolare 1.5.8).

Ciò consentirebbe di migrare più facilmente a angolare 2, anche. E ovviamente dovresti separare tutte queste fonti in file separati.

Si consiglia di provare TypeScript. Questo ti porterebbe a Type Safety e molta sintassi allo zucchero e un modo più semplice di programmazione in modo orientato. Inoltre è possibile vedere dove viene definito un metodo e quali metodi e proprietà ha.

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>