角度，包裝指令打破換頁

Question

我似乎有一個問題，使用一個目錄整合打包成角度。當我加載到第一頁時，它似乎工作得很好，但是當我離開頁面並返回時，它看起來像是一個奇怪的方式，它在工作，但一切似乎都崩潰到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將我的觀點轉換爲典型的方式。這個指令調用嵌套在視圖中。 3.正如我所提到的，當我返回頁面時，packery和dragabilly正在運行，它們只是卡在左邊的1列（可以上下拖動）。

我真的不知道從哪裏開始，因爲我沒有錯誤或線索。將不勝感激任何幫助。感謝您花時間閱讀！

編輯 - 我有一些圖片，以澄清

這是正常的樣子 -

，這是它的外觀，當你離開和返回

頁面

你可以看到它的也檢查了引導行中的按鈕，因此我不確定發生了什麼。您仍然可以在兩種情況下拖動和移動它們。

Answer 1

我覺得你的問題可能是在這裏：

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

在這一if塊要定義$rootScope.packery和初始化插件。你的銷燬方法不會使$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 
});