I dissected ng-repeat and extracted the code blocks attached, seeing that these comprise the logic that handles the repeating algorithm (which I want to understand how it works).
I have quite a few questions, but since they are all about the internals of ng-repeat I chose to ask them all here. I don't see any reason to separate them into different SO questions. I have marked inline to which line(s) of code each question refers to.
trackById
is not the native hasOwnProperty
function? (that's what that assertNotHasOwnProperty
function does, part of Angular's internal API)nextBlockMap
and in nextBlockOrder
? block.endNode
and block.startNode
?nextNode
has (been) '$$NG_REMOVED'
?Like I said, I dug through ng-repeat to find the code I deemed relevant to the repeating mechanism. Plus, I do understand the rest of the directive. So without further ado, here is the code (from v1.2.0):
length = nextBlockOrder.length = collectionKeys.length;
for (index = 0; index < length; index++) {
key = (collection === collectionKeys) ? index : collectionKeys[index];
value = collection[key];
trackById = trackByIdFn(key, value, index);
// question #1
assertNotHasOwnProperty(trackById, '`track by` id');
// question #2
if (lastBlockMap.hasOwnProperty(trackById)) {
block = lastBlockMap[trackById];
delete lastBlockMap[trackById];
nextBlockMap[trackById] = block;
nextBlockOrder[index] = block;
// question #3
} else if (nextBlockMap.hasOwnProperty(trackById)) {
// restore lastBlockMap
forEach(nextBlockOrder, function(block) {
if (block && block.startNode) lastBlockMap[block.id] = block;
});
// This is a duplicate and we need to throw an error
throw ngRepeatMinErr('dupes', "Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}",
expression, trackById);
// question #4
} else {
// new never before seen block
nextBlockOrder[index] = { id: trackById };
nextBlockMap[trackById] = false;
}
}
for (index = 0, length = collectionKeys.length; index < length; index++) {
key = (collection === collectionKeys) ? index : collectionKeys[index];
value = collection[key];
block = nextBlockOrder[index];
// question #5
if (nextBlockOrder[index - 1]) previousNode = nextBlockOrder[index - 1].endNode;
if (block.startNode) {
// if we have already seen this object, then we need to reuse the
// associated scope/element
childScope = block.scope;
// question #6
nextNode = previousNode;
do {
nextNode = nextNode.nextSibling;
} while(nextNode && nextNode[NG_REMOVED]);
if (block.startNode != nextNode) {
// existing item which got moved
$animate.move(getBlockElements(block), null, jqLite(previousNode));
}
previousNode = block.endNode;
} else {
// new item which we don't know about
childScope = $scope.$new();
}
// question #7
if (!block.startNode) {
linker(childScope, function(clone) {
clone[clone.length++] = document.createComment(' end ngRepeat: ' + expression + ' ');
$animate.enter(clone, null, jqLite(previousNode));
previousNode = clone;
block.scope = childScope;
block.startNode = previousNode && previousNode.endNode ? previousNode.endNode : clone[0];
block.endNode = clone[clone.length - 1];
nextBlockMap[block.id] = block;
});
}
}
lastBlockMap = nextBlockMap;
After some tinkering with the directive, I became familiar with ng-repeater
s code, and managed to answer some of my questions. I highlighted in bold the things I couldn't yet figure out on my own, and would appreciate if anyone could shed some light on the bold parts:
hasOwnProperty
, because they use that method to check whether the ID is present in the iteration objects (lastBlockMap
, nextBlockMap
) (this process explained below). I couldn't find out on what scenario this can actually happen, however.
nextBlockMap
contains all items that will be transcluded on the current model change. lastBlockMap
contains everything from the previous model update. It used for finding duplicates in the collection.for
loop, ng-repeat
fills up nextBlockMap
with items from lastBlockMap
. Looking at the order of if
s, it's easy to see that if the item cannot be found in lastBlockMap
, but it is already present in nextBlockMap
(meaning, it was already copied there from lastBlockMap
, and therefore its trackById
appears twice in the collection) - it's a duplicate. What the forEach
does is simply run through all initialized items in nextBlockMap
(block
s that have a startNode
property) and push their ID back into lastBlockMap
. I cannot however understand why this is necessary.
nextBlockOrder
(all trackById
s in an array) from nextBlockMap
(all block
objects in a trackById
hash), is this line, which working with an array makes it an easy and simple operation: if (nextBlockOrder[index - 1]) previousNode = nextBlockOrder[index - 1].endNode;
. It is explained in the answers to question 5 and 6:block.startNode
and block.endNode
are the first and last DOM nodes in the block belonging to an item in the collected being repeated. Therefore, this line here sets previousNode
to reference the last DOM node of the previous item in the repeater.previousNode
is then used as the first node, in a loop that checks how the DOM changed when items have been moved around or removed from the repeater collection - again, only in case we are not working with the first block in the array.$scope
and startNode
and endNode
for later reference, and saves everything in nextBlockMap
. The comment created right after the cloned element, is there to guarantee we always have an endNode
.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With