如何在角度控制器或範圍上使用angular.toJson

Question

請參閱我的以下jsFiddle示例，其中我嘗試使用angular.toJson將Angular.js對象推入JSon表示形式。我得到的僅僅是「$ SCOPE」。

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

我想要做的就是當前的屬性和值。在這個例子中我會希望看到的是

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

有沒有更好的方式來獲得在JSON格式的數據（即不使用範圍）？很明顯，我可以手動滾動一個方法，該方法獲取值並推出JSon表示，但隨着控制器的更改，該函數也會發生變化，因此我寧願調用toJson類型的方法。任何人都知道這樣做的正確方法？提前致謝。

Answer 1

我可以看到你是從jQuery的未來世界，但angular.js事情變得簡單多了，請檢查此的jsfiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

隨着您可以將事件angular.js得多，簡單得多：

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

，然後在你的控制器：

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

其實這可能是與angular.js濾波器來實現更容易，檢查THI小號的jsfiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/2/其中有：

{{user | json}} 

隨着angular.js你需要「忘卻」了一下一些jQuery的習慣，但這是好的，因爲事情變得非常非常的大部分時間更容易。

Answer 2

，其中用戶要stringfied JSON對象或 使用angular.toJson將其轉換爲JSON格式的字符串您可以使用角度內置JSON過濾器

{{ user | json }} 

。請參考我的小提琴https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

既然你問如何得到這個沒有$scope，這裏是一個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>