Angular，packery指令打破页面更改

Question

我似乎在使用将packery整合到angular中的目录时出现问题。当我加载到第一页时似乎工作得很好，但是当我离开页面并返回它看起来就像它的破碎包装一样奇怪的方式它可以工作但是一切似乎都崩溃了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.我正在使用ngroutes以典型的方式交换我的观点。 2.该指令调用嵌套在视图中。 3.正如我所提到的，当我返回页面时，packery和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
});