Sposób korzystania z funkcji angle.toJson na sterowniku kątowym lub zakresie

Question

Zobacz mój przykład jsFiddle, w którym próbuję przesłać obiekt Angular.js do reprezentacji JSon za pomocą metody angle.toJson. To, co otrzymuję, to wynik "$ SCOPE".

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

Co chcę zrobić, to bieżące właściwości i wartości. W tym przykładzie, co mam nadzieję zobaczyć to

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

Czy istnieje lepszy sposób, aby dostać się na tych danych w postaci JSON (nie używając zakresu)? Oczywiście mogłem ręcznie rzucić metodą, która przyjmuje wartości i wypycha reprezentację JSon, ale ponieważ kontroler również to zmienia, byłaby to funkcja, więc wolałbym raczej wywołać metodę typu toson. Czy ktoś wie, jak to zrobić? Z góry dziękuję.

Answer 1

widzę, że idą ze świata jQuery, ale z angularjs rzeczy stają się znacznie prostsze, prosimy o zaznaczenie tego jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

Z angularjs można dołączyć zdarzenia o wiele prostsze:

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

a następnie w kontrolerze:

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

w rzeczywistości może to być zrobione jeszcze łatwiejsze angularjs filtrów, sprawdzić jes s jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ który posiada:

{{user | json}} 

Z angularjs musisz „oduczyć” trochę niektóre z nawyków jQuery, ale to jest dobre, ponieważ robi się o wiele łatwiejsze większość czasu.

Answer 2

Można użyć kątowy wbudowany filtr json jako

{{ user | json }} 

gdzie użytkownik jest obiekt JSON być stringfied LUB użycie angular.toJson, aby przekształcić go w formacie JSON ciąg. Proszę odnieść się do mojego skrzypce https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

Skoro pytasz jak się to bez $scope, tutaj jest przykładem angular 1.5.9 z komponentów (zostały one wprowadzone w kątowym 1.5.8).

Pozwoliłoby to na łatwiejszą migrację do kątowej 2. Oczywiście wszystkie te źródła zostałyby rozdzielone na osobne pliki.

Powinieneś wypróbować próbując: TypeScript. To dostarczyłoby Ci Type Safety i dużo składni cukru i łatwiejszy sposób programowania w sposób zorientowany. Można również zobaczyć, gdzie zdefiniowana jest metoda oraz jakie są jej metody i właściwości.

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>