Как использовать angular.toJson в контроллере или области действия angular

См. мой следующий пример jsFiddle, в котором я пытаюсь нажать объект Angular.js в представления JSon, используя Angular.toJson. В результате я получаю просто "$ SCOPE".

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

То, что я хочу сделать, это получить текущие свойства и значения. В этом примере я надеюсь, что это будет

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

Есть ли лучший способ получить данные в форме JSon (т.е. не использовать область)? Очевидно, что я мог бы вручную перевернуть метод, который принимает значения и выталкивает представление JSon, но по мере того, как контроллер изменяет так, это будет работать так, что я бы скорее просто вызвал метод типа toJson. Кто-нибудь знает, как это сделать? Спасибо заранее.

Ответ 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 }}

где пользователь - это объект Json, который должен быть привязан к строке ИЛИ используйте angular.toJson, чтобы преобразовать его в строку в формате JSON. Пожалуйста, обратитесь к моей скрипке https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Ответ 3

Поскольку вы спросили, как получить это без $scope, вот пример angular 1.5.9 с компонентами (они были введены в angular 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>