角度コントローラまたはスコープでangular.toJsonを使用する方法

Question

Angular.jsオブジェクトをangular.toJsonを使用してJSon表現にプッシュしようとしている次のjsFiddleの例を参照してください。私が得るのは、結果として "$ SCOPE"だけです。

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

私は何をしたい現在のプロパティと値を取得することです。私は見てほしいだろうか。この例では（つまり、スコープを使用していない）JSON形式でそのデータを取得するための良い方法はあります

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

のですか？明らかに、私は値を受け取り、JSon表現をプッシュするメソッドをロールすることができますが、コントローラーも同様にその関数が変更されるので、むしろtoJsonタイプのメソッドを呼び出すことになります。誰でもこれを行う適切な方法を知っていますか？前もって感謝します。

Answer 1

私はあなたがjQueryの世界から来ていることがわかりますが、angular.js物事がはるかに簡単になっていると、このjsFiddleをチェックしてくださいすることができます：あなたは、イベントを添付することができangular.jsでhttp://jsfiddle.net/pkozlowski_opensource/ASspB/1/

ずっと、ずっと簡単：

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

してから、コントローラに：実際には

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

これはangular.jsフィルタをさらに容易に行うことができ、THIをチェックS jsFiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/2/ありますangular.jsで

{{user | json}} 

は、あなたが「未学習」jQueryの習慣のいくつかのビットが必要ですが、物事はほとんどの時間をはるかに、はるかに簡単に取得するので、これは良いです。ユーザーがstringfiedするJSONオブジェクトまたはJSON形式の文字列に変換し 使用angular.toJsonがどこにある

Answer 2

あなたが

{{ user | json }} 

としてJSONフィルターに内蔵された角度を使用することができます。あなたは$scopeなく、これを取得する方法を尋ねたので、私のバイオリンhttps://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

を参照してください、ここで部品とangular 1.5.9例である（これらは、角1.5.8で導入されました）。

これにより、の角2に簡単に移行することができます。 もちろん、これらのソースをすべて別々のファイルに分けることもできます。

TypeScriptを試してください。これにより、Type Safetyと砂糖の構文が多くなり、指向の方法でプログラミングするのが簡単になります。また、メソッドが定義されている場所と、そのメソッドとプロパティがどのようなものかを見ることができます。

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>