javascript - 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 作者!)，但是当我交换 View 时它会变得困惑。奇怪的是指令确实在运行，因为我可以拖动并重新排列包装元素，但它们都卡在最左侧的 1 列上，我无法弄清楚为什么。

我不知道这是否相关，但它可能值得分享 - 1. 我正在使用 ngroutes 以典型方式交换我的观点。 2. 该指令调用嵌套在 View 中。 3. 正如我提到的，当我返回页面时，packery 和 dragabilly 正在运行，它们只是停留在左侧的 1 列(可以上下拖动)。

我真的不知道从哪里开始，因为我没有抛出任何错误或线索。将不胜感激任何帮助。感谢您花时间阅读!

编辑 - 我有一些图片需要澄清

这是正常情况下的样子-

这是你离开和返回页面时的样子

你可以看到它也在引导行中的按钮上，所以我不确定它发生了什么。在这两种情况下，您仍然可以拖动和移动它们。

Answer 1

我认为您的问题可能出在这里:

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

在 if block 中，您正在定义 $rootScope.packery 并初始化插件。您的 destroy 方法永远不会使 $rootScope.packery 无效，因此永远不会重新初始化插件。当您返回 View 时。

尝试这样修改:

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