Angular Как лучше использовать мой сервис

Question

Angular Как лучше использовать мой сервис

0

У меня есть служба, которая генерирует форму галереи изображений.

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

Здесь услуга:

'use strict';

angular.module('myApp')
  .service('displayGal', function(){

        var displayGallery = function(){
          var images = document.getElementById('flickr_gallery').children;

        var padding = 10,
            columns = 3,
            leftPosition,
            topPosition;

        for(var i = 1; i < images.length; i++){
            if(i % columns === 0){
                topPosition = (images[i-columns].offsetTop + images[i-columns].offsetHeight) + padding;
                images[i].style.top = topPosition + 'px';
            }else{
                if(images[i-columns]){
                    topPosition = (images[i-columns].offsetTop + images[i-columns].offsetHeight) + padding;
                    images[i].style.top = topPosition + 'px';
                }
                leftPosition = (images[i-1].offsetLeft + images[i-1].offsetWidth) + padding;
                images[i].style.left = leftPosition + 'px';
            }
        }
      }
        window.addEventListener('load', displayGallery, true);
        window.addEventListener('resize', displayGallery, true);
  });

и я ввожу его так же, как в моем контроллере:

angular.module('myApp')
  .controller('MainCtrl', function ($scope, displayGal) {
...
...etc

Что я делаю не так?

adam 29 июнь 2015, в 01:58

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

GregL · Answer 1 · 2015-06-28T22-02-00.000Z

Для начала такого рода манипуляции с DOM не принадлежат сервису. Он принадлежит директиве.

Во-вторых, есть ли причина, по которой вы выполняете ручную манипуляцию DOM, вместо использования угловых директив и привязок?

В-третьих (и реальный ответ на вашу непосредственную проблему), услуги являются одиночными в Angular. При первом введении они получают экземпляр, и результат сохраняется для всех последующих инъекций. Так как ваша служебная функция ничего не возвращает, значение undefined будет использоваться для ввода в MainCtrl. Если вы должны сделать это как услугу, измените использование .factory() вместо .service() и верните новую функцию каждый раз, когда будете выполнять эту работу. Затем вызовите эту функцию внутри вашего MainCtrl.

например

angular.module('sainsburysTest')
       .factory('displayGal', function(){
            var displayGallery = function () {
            ...
            };
            return displayGallery;
       });

 angular.module('sainsburysTest')
        .controller('MainCtrl', function ($scope, displayGal) { 
             displayGal();
             ...
        });

Хотя я должен снова подчеркнуть, что это не очень хорошая идея. Не в последнюю очередь потому, что вы не можете отменить регистрацию обработчиков событий в window когда вы переходите от этой страницы. Это быстрый путь к утечкам памяти.

Принимая во внимание, что если вы делаете это в директиве, вы можете прослушивать $scope.$on('$destroy', function() {... }); событие, а затем удалить обработчик событий в window правильно.

Спасибо Грегу за детали, я изменяю это на фабрику, чтобы исправить это и посмотреть, что происходит, но замечаю, что происходит.
@tarboosh Вы обязательно displayGallery функцию displayGallery как я и предлагал? Если вы console.log('displayGal = ', displayGal); в качестве первой строки в вашей функции MainCtrl , что регистрируется?
сама функция, но изображения плохо отображаются на виде
@tarboosh Что вы подразумеваете под "изображения не очень хорошо отображаются в виде"? Вы расследовали, как сделать это в качестве директивы? Это действительно лучший способ сделать это, даже если вы еще не понимаете директив. Изучение их значительно продвинет ваши навыки AngularJS.
Спасибо за вашу поддержку в этом вопросе, я обязательно постараюсь сделать как директивы