如何在角度控制器或范围内使用 angular.toJson答案

【问题标题】：How to use angular.toJson on a angular controller or scope如何在角度控制器或范围内使用 angular.toJson
【发布时间】：2016-12-06 12:58:26
【问题描述】：

请参阅我的以下 jsFiddle 示例，其中我尝试使用 angular.toJson 将 Angular.js 对象推送到 JSon 表示中。结果我得到的只是“$SCOPE”。

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

我想做的是获取当前的属性和值。在这个例子中，我希望看到的是

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

有没有更好的方法来获取 JSON 形式的数据（即不使用范围）？显然，我可以手动推出一个获取值并推出 JSon 表示的方法，但是随着控制器的变化，该函数也会发生变化，所以我宁愿只调用一个 toJson 类型的方法。有人知道这样做的正确方法吗？提前致谢。

【问题讨论】：

标签： javascript angularjs

【解决方案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 过滤器可以更轻松地完成此操作，请查看此 jsFiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/2/，其中包含：

{{user | json}}

使用 angular.js，您需要“忘记”一些 jQuery 习惯，但这很好，因为大多数时候事情变得非常容易。

【讨论】：

【解决方案2】：

您可以使用 Angular 内置的 json 过滤器作为

{{ user | json }}

其中 user 是要字符串化的 Json 对象或使用 angular.toJson 将其转换为 JSON 格式的字符串。请参考我的小提琴https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

【讨论】：

【解决方案3】：

由于您询问如何在没有 $scope 的情况下获得此功能，因此这里有一个带有组件的 angular 1.5.9 示例（它们是在角度 1.5.8 中引入的）。

这也可以让您更轻松地迁移到 angular 2。当然，您可以将所有这些来源分成单独的文件。

你应该试试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>

【讨论】：