Skip to content
This repository has been archived by the owner on Dec 30, 2018. It is now read-only.

Glitch on ng-repeat array reassignment #201

Open
DmitryGonchar opened this issue Sep 13, 2017 · 1 comment
Open

Glitch on ng-repeat array reassignment #201

DmitryGonchar opened this issue Sep 13, 2017 · 1 comment

Comments

@DmitryGonchar
Copy link

Sorry, was not able to create a demo for this, since did not find CDN with the latest version of this lib, and jsfiddle, jsbin and others seems not to support js file upload.

But basically it boils down to this:

var item = { text: 'abc' }, item2 = { text: 'xyz' };

$scope.bricks = [item]; // can be several items
$timeout(function() {
   $scope.bricks = [item2];  // we reassign array to another one. Real use case is items search, where we get them from server
})

Expected: new items appear without any UI issues
Actual: there is a glitch, at first item2 appears on the left (as a second item), then, after about 30ms first item disappears. This glitch exists at least when masonry's transitionDuration is set to 0 (no transition)

============================= Solution ===============================
There are two variants actually:
a) Easiest one is to allow to set timeout delay (in scheduleMasonry) as a param, by user. If set to 0, this problem disappears. Also would help with other issues like #103, and in general, imho, such values should not be hard-coded. I can push a PR if needed

or

b) A bit more complex one. If we schedule addBrick as well - issue is resolved as well. Some problems are:

  1. It seems to be not possible to schedule removeBrick, since UI elm is removed before scheduled task is run, and there is an error in console from masonry that no such elm exists. But if we schedule only addBrick, without removeBrick, it is possible that brick is added, and then before timeout runs out it is removed. Can be solved by checking bricks[brickId] in scheduleMasonry() as well, but not sure which way is better to pass the brickId to this function, since it is a scope.$id

  2. 'resize' and 'layout' commands should be run after all 'append'/'prepend' commands. This one is done, after timeout it checks scheduled items for such commands and if they exist, puts tem to the bottom of the list

@DmitryGonchar
Copy link
Author

b) 2. is possible to do e.g. via element.data().
It is better to do it via passing a function to array, but this would require refactoring of many methods, not to pass all args to masonry

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant