Angular Packery指令在页面更改时中断

Question

我似乎在使用将packery集成到angular中的目录时遇到问题。 当我加载到第一页上时，它似乎工作得很好，但是当我离开该页面并返回时，它看起来像是破损的包装盒，在某种程度上可以正常工作，但是一切似乎都折叠成一列，无法为我的生活弄清楚如何。

我正在使用这个示例，发现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
});