Как вынести http запрос в фабрику?

Question

[Sapphiron532]

Здравствуйте.
Начал переписывать проект, пока он на ранней стадии, но столкнулся с трудность.
В контроллере есть функция, которая вызывается по клику по ссылке, получает json, который заносит в массив. Дальше эти данные отображаются на странице с помощью ng-repeat и директивы.

$scope.getFiles = function(id) {
	$element.find("files").remove(); // очистка div'a
	$http.get("http://тут_урл").success(function(response) {
	    $scope.files = response;
	});
    };

Директива

app.directive("file", function() {

    return {
	restrict : "E",
	scope : true,
	controller : function($scope, $element) {
	    $scope.fileName = $scope.file.fileName;
	    $scope.fileContent = $scope.file.content;
	},

	link : function(scope, el, attr) {
	    scope.fileName = scope.fileName;
	    scope.fileContent = scope.fileContent;
	},

	template : "<div id=\"{{fileName}}\"><h3 class='title'>name: {{fileName}}</h3> \
 <pre class=\"java\">{{fileContent}}</pre></div>"
    }
});

Пробую просто вынести функцию в фабрику и присвоить результат переменной.

angular.module("myApp").factory("gistsFactory", function( $http) {
    var service = {};

    service.getFiles = function(id) {
//	    $element.find("files").remove();
	    $http.get("http://тут_урл").success(function(response) {
		 return response;
	   });
    }
    return service;
})

//В контроллере меняю на вызов функции
 $scope.getFiles = function(id) {
	    $scope.files = gistsFactory.getFiles(id);
 };

Но если первый вариант работает, то при вызове из фабрики, данные приходят, но на странице не отображаются, хотя в обоих случаях я внутри одной и той же функции одной и той же переменной присваиваю данные, которые просто получаются в разных местах.

Answer 1

[Сергей Протько]

в фабрику

Для начала разберитесь что есть фабрика. Фабрика это такая штука которая что-то создает, например собирает и инстанцирует какой-то сервис.

Но если первый вариант работает, то при вызове из фабрики,

А вы приглядитесь, вы в методе getFiles вашего сервиса ничего не возвращаете. Надо возвращать промис.

.factory("gistsFactory", function( $http, $q) {

    return {
         getFiles: function(id) {
              return $http.get("http://тут_урл").then(function(response) {
                   return response.data;
              }, function (reason) {
                   return $q.reject(reason);
              });
    };
})

p.s. не пользуйтесь $scope-ом в контроллерах, и да, почитайте документацию.

Comments

[Sapphiron532]

А чем $scope плох в контроллерах? В той же документации он там повсеместно используется.

[Сергей Протько]

Sapphiron532: потому что controller as был введен только с версии angular 1.2 (если мне память не изменяет), а на примеры из документации это сильно не влияет.

В целом отказ от использования скоупов приводит нас к следующему:
- нет проблем с наследованием скаляров в скоупе... так как мы и не пытаемся этого делать
- наши контроллеры начинают походить на нормальные объекты, особенно актуально в виду ES2015
- понижается вероятность того, что кто-то вставит кастыль в виде ватчера в контроллере и вместо этого будет дергать по какому-то событию метод контроллера.
- в шаблонах проще ориентироваться, так как мы знаем контекст, в которых наши функции вызываются
- код банально чище, проще поддерживать.

[Сергей Протько]

Sapphiron532: еще есть клевая тема - отказаться от контроллеров для состояний/маршрутов. Все есть директивы, а вот у них уже должны быть контроллеры (если кончно они делают что-то из логики). На шаг ближе к концепции вэб компонентов.