[英]Angular, packery directive breaking on page change
I seem to be having a problem using a directory integrating packery into angular. 我似乎在使用将packery集成到angular中的目录时遇到问题。 It seems to be working just fine when I load onto the first page, but when I leave the page and return it looks like its breaking packery in a weird sort of a way where it's working but everything seems to be collapsed to 1 column and I can't for the life of me figure out how.
当我加载到第一页上时,它似乎工作得很好,但是当我离开该页面并返回时,它看起来像是破损的包装盒,在某种程度上可以正常工作,但是一切似乎都折叠成一列,无法为我的生活弄清楚如何。
I'm using this example I found http://codepen.io/amergin/pen/AEIvt , and it seems to be working great. 我正在使用这个示例,发现http://codepen.io/amergin/pen/AEIvt ,它似乎工作得很好。 for reference here is the directory
供参考的是目录
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();
});
}
};
}
]);
and in my template I just have 在我的模板中
<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular >
Pretty straight forward, and again this works great (thank you to the codepen author!), however it's going haywire when I swap views. 非常简单,这再次很好用(感谢Codepen作者!),但是当我交换视图时,它变得很麻烦。 What's weird is the directive is definitely running because i can drag and re arrange the packery items, but they are all stuck on 1 column on the left most side and I can't figuire out for the life of me why.
奇怪的是,该指令肯定在运行,因为我可以拖动并重新排列包装物品,但它们都卡在最左侧的一列上,我无法为自己的生命而烦恼。
I don't know if this is relevant but it might be worth sharing - 1. I am using the ngroutes to swap my views around the typical way. 我不知道这是否相关,但可能值得分享-1.我正在使用ngroutes围绕典型方式交换意见。 2. This directive call is nested inside a view.
2.此指令调用嵌套在视图内。 3. As I mentioned, packery and dragabilly are running when I return the page, they are just stuck on 1 column to the left (can drag up and down).
3.正如我提到的,当我返回页面时,packery和dragabilly正在运行,它们仅停留在左侧的1列上(可以上下拖动)。
I really have no idea where to start with this as I have no errors thrown or clues. 我真的不知道从哪里开始,因为我没有抛出任何错误或线索。 Would appreciate any help.
将不胜感激。 Thanks for taking the time to read!
感谢您抽出宝贵的时间阅读!
Edit - I have some pictures to clarify 编辑 -我有一些图片需要澄清
This is how it looks normally - 这是正常的样子-
And this is how it looks when you leave and return to the page 这就是您离开并返回页面时的外观
you can see it's going over the buttons too which are in a bootstrap row so I'm not sure what's going on with it. 您会看到它也在引导行中的按钮上移动,所以我不确定它是怎么回事。 You can still drag and move them in both instances.
您仍然可以在两个实例中拖动和移动它们。
I think your issue might be here: 我认为您的问题可能在这里:
if (!$rootScope.packery) { ... }
Within that if
block you are defining $rootScope.packery
and initializing the plugin. 在该
if
块中,您将定义$rootScope.packery
并初始化插件。 Your destroy method never nullifies $rootScope.packery
, so the plugin is never re-initialized. 您的destroy方法永远不会使
$rootScope.packery
无效,因此插件永远不会重新初始化。 When you return to the view. 当您返回视图时。
Try modifying like so: 尝试像这样修改:
// watch for destroying an item
scope.$on('$destroy', function() {
$rootScope.packery.remove(scope.element[0]);
scope.packery.layout();
$rootScope.packery = null; // add this line
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.