Angular, packery directive breaking on page change

Question

I seem to be having a problem using a directory integrating packery into angular. It seems to be working just fine when I load onto the first page, but when I leave the page and return it looks like its breaking packery in a weird sort of a way where it's working but everything seems to be collapsed to 1 column and I can't for the life of me figure out how.

I'm using this example I found http://codepen.io/amergin/pen/AEIvt , and it seems to be working great. for reference here is the directory

 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();
    });
  }
};

 }
]);

and in my template I just have

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

Pretty straight forward, and again this works great (thank you to the codepen author!), however it's going haywire when I swap views. What's weird is the directive is definitely running because i can drag and re arrange the packery items, but they are all stuck on 1 column on the left most side and I can't figuire out for the life of me why.

I don't know if this is relevant but it might be worth sharing - 1. I am using the ngroutes to swap my views around the typical way. 2. This directive call is nested inside a view. 3. As I mentioned, packery and dragabilly are running when I return the page, they are just stuck on 1 column to the left (can drag up and down).

I really have no idea where to start with this as I have no errors thrown or clues. Would appreciate any help. Thanks for taking the time to read!

Edit - I have some pictures to clarify

This is how it looks normally -

And this is how it looks when you leave and return to the page

you can see it's going over the buttons too which are in a bootstrap row so I'm not sure what's going on with it. You can still drag and move them in both instances.

Answer 1

I think your issue might be here:

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

Within that if block you are defining $rootScope.packery and initializing the plugin. Your destroy method never nullifies $rootScope.packery , so the plugin is never re-initialized. When you return to the view.

Try modifying like so:

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