Почему не устанавливается связь по ссылке с объектом из factory в controller?

Question

[Дмитрий Иванов]

Пишу приложение на AngularJS. Есть у меня контроллер (в упрощённом виде)

app.controller("orgsItemCtrl", function($scope, orgsItemService) {
	$scope.data	= orgsItemService.data;
	$scope.fn		= orgsItemService.fn;
}

и фабрика к нему (также приведена в упрощённом виде)

app.factory('orgsItemService', function($http) {
	var serviceObj	= {
		data	: {},
		fn	: {
			init	: function() {
				// Тут получаем данные с сервера через $http и сохраняем их в serviceObj.data
			}
		}
	};

	serviceObj.fn.init();
	return serviceObj;
}

Во view устанавливаю связь с полями объекта data из orgsItemCtrl.

В итоге оно не работает как задумывалось, т.к. data в orgsItemCtrl остаётся пустым объектом, даже после получения данных с сервера.
Если же перенести функционал из фабрики в контроллер, то всё работает. Пример работающего кода:

app.controller("orgsItemCtrl", function($scope, orgsItemService) {
	$scope.data	= {};
	$scope.fn		= {
		init	: function() {
			// Тут получаем данные с сервера через $http и сохраняем их в serviceObj.data
		}
	}
}

Так почему же не происходит связывание по ссылке в этом месте: $scope.data = orgsItemService.data;

Answer 1

[Владимир]

Упустил самый важный момент в присваивании, каким образом меняешь данные при получении, если ты не модифицируешь существующий объект data а заменяешь его на новый, то вполне логично, что контроллер не видит замены.
Кроме того почитай вот это www.codelord.net/2016/11/23/spotting-outdated-angu...
Называешь orgsItemService а пытаешся сделать фабрику, кроме того ты отдаешь в фабрике обект а не екземпляр класса

Comments

[Дмитрий Иванов]

Да, я действительно при получении данных делаю так:
serviceObj.data = response[0];
Тут я действительно упустил этот важный момент. Отсюда вопрос: как лучше организовать присвоение полученных данных? Не присваивать же полтора десятка полей вручную.

Про именование и фабрику. Есть принципиальная разница между .factory и .service? Поясните, если можно.

И ещё поясните про

отдаешь в фабрике обект а не екземпляр класса

[Владимир]

Дмитрий Иванов:
Как вариант в контроллере this.items = orgsItemFactory(); (я заменил $scope на this поєтому вам прийдется почитать первую ссылку) а в шаблоне $ctrl.items.data

По поводу фабрики и сервиса, https://habrahabr.ru/post/190342/
Можно возвращать и объект, как делаете вы, но лично мне привычнее запись вида

var serviceObj	= function(){
    this.data	= {};
    this.init = function() {
        // Тут получаем данные с сервера через $http и сохраняем их в serviceObj.data
      }
  };

console.log(new serviceObj());

А еще лучше через константу и екземпляр класса
https://github.com/rwwagner90/angular-styleguide-es6

[Дмитрий Иванов]

Владимир: Спасибо за пояснения!
Присвоение полученных данных я всё же сделал другим способом, благо вопрос поддержки старых браузеров у меня не стоит и формат ответа сервера позволяет:
Object.assign(serviceObj.data, response[0]))

Про фабрику и сервис. Статью видел, но так и не понял какой вариант когда стоит использовать. Даже осталась мысль: кому как нравится, тот пусть так и использует.

Ну, и вопрос считаю закрытым. Ещё раз спасибо!

[Владимир]

Дмитрий Иванов: сервис - общие данные для нескольких компонентов. Фабрика - данные для компонентов одного типа, например несколько селект листов, плашки с коротким описанием товара.