Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
feat($compile): support modifying the DOM structure in postlink fn
Browse files Browse the repository at this point in the history
Support modifying the DOM structure in the post link function of a directive
by creating a defensive copy of the node list, as opposed to a live DOM list.
This is useful for directives to actually replace their entire DOM fragment,
e.g. with the HTML fragment generated by a 3rd party component (Closure, Bootstrap ...).
Fix the indentation of the compileNodes function (was one too little).
  • Loading branch information
mprobst authored and IgorMinar committed Jan 10, 2013
1 parent c909f49 commit cdf6fb1
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 3 deletions.
12 changes: 9 additions & 3 deletions src/ng/compile.js
Original file line number Diff line number Diff line change
Expand Up @@ -394,10 +394,16 @@ function $CompileProvider($provide) {
return linkFnFound ? compositeLinkFn : null;

function compositeLinkFn(scope, nodeList, $rootElement, boundTranscludeFn) {
var nodeLinkFn, childLinkFn, node, childScope, childTranscludeFn;
var nodeLinkFn, childLinkFn, node, childScope, childTranscludeFn, i, ii, n;

for(var i = 0, n = 0, ii = linkFns.length; i < ii; n++) {
node = nodeList[n];
// copy nodeList so that linking doesn't break due to live list updates.
var stableNodeList = [];
for (i = 0, ii = nodeList.length; i < ii; i++) {
stableNodeList.push(nodeList[i]);
}

for(i = 0, n = 0, ii = linkFns.length; i < ii; n++) {
node = stableNodeList[n];
nodeLinkFn = linkFns[i++];
childLinkFn = linkFns[i++];

Expand Down
19 changes: 19 additions & 0 deletions test/ng/compileSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,25 @@ describe('$compile', function() {
expect(log).toEqual('LOG; LOG');
});
});


it('should allow modifying the DOM structure in post link fn', function() {
module(function() {
directive('removeNode', valueFn({
link: function($scope, $element) {
$element.remove();
}
}));
});
inject(function($compile, $rootScope) {
element = jqLite('<div><div remove-node></div><div>{{test}}</div></div>');
$rootScope.test = 'Hello';
$compile(element)($rootScope);
$rootScope.$digest();
expect(element.children().length).toBe(1);
expect(element.text()).toBe('Hello');
});
})
});

describe('compiler control', function() {
Expand Down

0 comments on commit cdf6fb1

Please sign in to comment.