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