Javascript 如何在角度控制器或范围上使用 angular.toJson
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11819301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use angular.toJson on a angular controller or scope
提问by likestoski
Please see my following jsFiddle example where I am trying to push an Angular.js object into a JSon representations using angular.toJson. What I get is just "$SCOPE" as the result.
请参阅我下面的 jsFiddle 示例，其中我尝试使用 angular.toJson 将 Angular.js 对象推送到 JSon 表示中。结果我得到的只是“$SCOPE”。
What I want to do is get the current properties and values. In this example what I would hope to see is
我想要做的是获取当前的属性和值。在这个例子中，我希望看到的是
{ firstName: 'Frank', lastName: 'Williams' }
Is there a better way to get at that data in JSon form (ie not using scope)? Obviously I could hand roll a method that takes the values and pushes out a JSon representation but as the controller changes so too would that function so I would rather just call a toJson type method. Anyone know of the proper way to do this? Thanks in advance.
有没有更好的方法以 JSon 形式获取该数据（即不使用范围）？显然我可以手动滚动一个方法来获取值并推出一个 JSon 表示，但是随着控制器的变化，该函数也会发生变化，所以我宁愿只调用一个 toJson 类型的方法。有人知道这样做的正确方法吗？提前致谢。
回答by pkozlowski.opensource
I can see that you are coming from the jQuery world, but with angular.js things are getting much simpler, please check this jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/1/
我可以看到您来自 jQuery 世界，但是使用 angular.js 事情变得更简单了，请检查这个 jsFiddle：http: //jsfiddle.net/pkozlowski_opensource/ASspB/1/
With angular.js you can attach events much, much simpler:
使用 angular.js 你可以附加事件，更简单：
<input type="button" ng-click="showJson()" value="Object To JSON" />
and then in your controller:
然后在您的控制器中：
$scope.showJson = function() {
$scope.json = angular.toJson($scope.user);
}
In fact this could be done even easier with angular.js filters, check this jsFiddle: http://jsfiddle.net/pkozlowski_opensource/ASspB/2/which has:
事实上，使用 angular.js 过滤器可以更容易地做到这一点，检查这个 jsFiddle：http: //jsfiddle.net/pkozlowski_opensource/ASspB/2/，它有：
{{user | json}}
With angular.js you need to "unlearn" a bit some of the jQuery habits, but this is good since things get much, much easier most of the time.
使用 angular.js，您需要“忘掉”一些 jQuery 习惯，但这很好，因为大多数时候事情变得容易多了。
回答by deeps
You can either use angular built in json filter as
您可以使用 Angular 内置的 json 过滤器作为
{{ user | json }}
where user is the Json object to be stringfied OR use angular.toJson to convert it to JSON-formatted string. Please refer to my fiddle https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/
其中 user 是要字符串化的 Json 对象，或者使用 angular.toJson 将其转换为 JSON 格式的字符串。请参考我的小提琴https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/
回答by Stefan Rein
Since you asked how to get this without the $scope, here is an angular 1.5.9example with components(they were introduced in angular 1.5.8).
由于您询问了如何在没有 的情况下获得它$scope，因此这是一个angular 1.5.9带有组件的示例（它们是在 angular 1.5.8中引入的）。
This would allow you to migrate easier to angular 2, too. And of course you would separate all this sources into separate files.
这也可以让您更轻松地迁移到angular 2。当然，您会将所有这些源分成单独的文件。
You should give TypeScripta try. This would get you Type Safetyand a lot of sugar syntax and a easier way to programming in an oriented way. Also you could see where a method is defined and what methods and properties it has.
你应该TypeScript试一试。这将为您Type Safety提供大量的语法糖，以及一种更简单的面向定向编程的方法。您还可以查看方法的定义位置以及它具有哪些方法和属性。
var module = angular.module("settingsApp", []);
module.service("userSettingsService", UserSettingsService);
module.component("userDetails", {
template: `
<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}}`,
controller: UserDetailsController
});
UserSettingsService.$inject = ["$q"];
function UserSettingsService($q) {
var _this = this;
this.$q = $q;
this.userDetails = [{
firstName: "Frank",
lastName: "Williams"
}];
this.getSettings = function (id) {
return _this.$q.resolve(this.userDetails[id]);
}
}
UserDetailsController.$inject = ["userSettingsService"];
function UserDetailsController(userSettingsService) {
var _this = this;
var userId = 0;
this.userSettingsService = userSettingsService;
userSettingsService.getSettings(userId).then(function (data) {
_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>