Угловая, директива пакера по изменению страницы

Question

У меня, кажется, проблема с использованием каталога, интегрирующего упаковку в угловую. Кажется, он работает отлично, когда я загружаюсь на первую страницу, но когда я покидаю страницу и возвращаю ее, она выглядит как ее разбивающая упаковка в странном виде, где она работает, но все, кажется, рушится до 1 колонки, а я не может для жизни меня выяснить, как.

Я использую этот пример, я нашел http://codepen.io/amergin/pen/AEIvt, и он работает отлично. для справки здесь каталог

angular.module('demoApp') 
.directive('packeryAngular', ['$rootScope', '$timeout', 
function($rootScope, $timeout) { 
return { 
    restrict: 'A', 
    scope: true, 
    link: function(scope, element, attrs) { 
    //console.log("link called on", element[0]); 
    scope.element = element; 
    if (!$rootScope.packery) { 
     $rootScope.packery = new Packery(element[0].parentElement, { 
     gutter: 10, 
     columnWidth: '.grid-sizer', 
     rowHeight: 300, 
     itemSelector: '.item' 
     }); 

     var draggable1 = new Draggabilly(element[0]); 
     $rootScope.packery.bindDraggabillyEvents(draggable1); 

     var orderItems = function() { 
     var itemElems = $rootScope.packery.getItemElements(); 

     }; 

     $rootScope.packery.on('layoutComplete', orderItems); 
     $rootScope.packery.on('dragItemPositioned', orderItems); 


    } else { 
     // console.log("else", element[0]); 
     $timeout(function() { 
     $rootScope.packery.appended(element[0]); 
     }); 
     var draggable2 = new Draggabilly(element[0], {handle: '.handle'}); 
     $rootScope.packery.bindDraggabillyEvents(draggable2); 


    } 
    $timeout(function() { 
     $rootScope.packery.layout(); 
    }); 


    // watch for destroying an item 
    scope.$on('$destroy', function() { 
     $rootScope.packery.remove(scope.element[0]); 
     scope.packery.layout(); 
    }); 
    } 
}; 

} 
]); 

и в моем шаблоне я просто

<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular > 

Довольно прямо вперед, и снова это прекрасно работает (спасибо codepen автора!), однако это будет непрочным когда я меняю вид. Что странно, директива определенно работает, потому что я могу перетащить и упорядочить элементы упаковки, но они все застряли на 1 столбец с левой стороны, и я не могу придумать для меня всю жизнь.

Я не знаю, действительно ли это актуально, но это может стоить обмена. 1. Я использую ngroutes, чтобы поменять свои взгляды на типичный способ. 2. Этот директивный вызов вложен внутри представления. 3. Как я уже упоминал, пакеты и dragabilly работают, когда я возвращаю страницу, они просто застряли на 1 столбец влево (можно перетащить вверх и вниз).

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

Редактировать - У меня есть несколько фотографий, чтобы уточнить

Вот как это выглядит нормально -

И вот как это выглядит, когда вы покинете и вернуться на страницу

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

Answer 1

Я думаю, ваша проблема может быть здесь:

if (!$rootScope.packery) { ... } 

В этом if блоке вы определяете $rootScope.packery и инициализации плагина. Ваш метод destroy никогда не отменяет $rootScope.packery, поэтому плагин никогда не будет повторно инициализирован. Когда вы вернетесь к просмотру.

Попробуйте изменить следующим образом:

// watch for destroying an item 
scope.$on('$destroy', function() { 
    $rootScope.packery.remove(scope.element[0]); 
    scope.packery.layout(); 
    $rootScope.packery = null; // add this line 
});