Cómo usar angular.toJson en un controlador angular o alcance

Question

Consulte el siguiente ejemplo de jsFiddle en el que intento insertar un objeto Angular.js en una representación JSon utilizando angular.toJson. Lo que obtengo es solo "$ SCOPE" como resultado.

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

Lo que quiero hacer es conseguir las propiedades y los valores actuales. En este ejemplo lo que yo esperaría a ver es

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

¿Hay una mejor manera de conseguir por lo que los datos en forma JSON (es decir, no utilizando alcance)? Obviamente, podría pasar un método que toma los valores y saca una representación de JSon, pero a medida que el controlador cambia también lo haría, así que preferiría simplemente llamar a un método de tipo toJson. Alguien sabe de la forma correcta de hacer esto? Gracias por adelantado.

Answer 1

puedo ver que viene desde el mundo de jQuery, pero con angularjs las cosas están mucho más simple, por favor marque esta jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

Con angularjs puede adjuntar eventos mucho, mucho más simple:

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

y luego en su controlador:

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

de hecho esto se podría hacer aún más fácil con angularjs filtros, comprobar Thi s jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ cuales tiene:

{{user | json}} 

Con angularjs que necesita para "desaprender" un poco algunos de los hábitos de jQuery, pero esto es bueno ya que las cosas se ponen mucho, mucho más fácil la mayor parte del tiempo.

Answer 2

También se puede usar angular incorporado en el filtro JSON como

{{ user | json }} 

donde usuario es el objeto JSON que se stringfied O uso angular.toJson para convertirlo en cadena con formato JSON. Por favor refiérase a mi violín https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

Ya que pedirá cómo conseguir esto sin la $scope, aquí es un ejemplo angular 1.5.9 con componentes (que se introdujeron en angular 1.5.8).

Esto le permitiría migrar más fácilmente a angular 2, también. Y, por supuesto, separarías todas estas fuentes en archivos separados.

Debe dar TypeScript una oportunidad. Esto te daría Type Safety y mucha sintaxis de azúcar y una forma más fácil de programar de forma orientada. También podría ver dónde se define un método y qué métodos y propiedades tiene.

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>