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

Added namespace tracking to $compile #8628

Closed
wants to merge 5 commits into from
Closed

Added namespace tracking to $compile #8628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b6b266d
WIP
benlesh Aug 15, 2014
6a4d9a0
add foreignObject handling
benlesh Aug 15, 2014
98ef4aa
added one ridiculous test just to make sure
benlesh Aug 15, 2014
15117b3
some clean up
benlesh Aug 20, 2014
8e296f7
readded previous tests
benlesh Aug 20, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 95 additions & 18 deletions src/ng/compile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
'use strict';

window.dump = function() {};

/* ! VARIABLE/FUNCTION NAMING CONVENTIONS THAT APPLY TO THIS FILE!
*
* DOM-related variables:
Expand Down Expand Up @@ -545,6 +547,35 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
// 'on' and be composed of only English letters.
var EVENT_HANDLER_ATTR_REGEXP = /^(on[a-z]+|formaction)$/;

var svgWrap = function(template) {
var wrapper = document.createElement('div');
wrapper.innerHTML = '<svg>'+template+'</svg>';
return wrapper.childNodes[0].childNodes;
};

var SVG_NAMESPACE = {
type: 'svg',
wrap: svgWrap,
clone: svgWrap,
cloneJqLite: function(elements) {
var nodes = [];
forEach(elements, function(element) {
nodes.push(svgWrap(element.outerHTML)[0]);
});
return jqLite(nodes);
}
};

var HTML_NAMESPACE = {
type: 'html',
wrap: identity,
clone: jqLiteClone,
cloneJqLite: function(elements) {
return JQLitePrototype.clone.call(elements);
}
};


/**
* @ngdoc method
* @name $compileProvider#directive
Expand Down Expand Up @@ -852,12 +883,15 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
//================================

function compile($compileNodes, transcludeFn, maxPriority, ignoreDirective,
previousCompileContext) {
previousCompileContext, namespace) {
if (!($compileNodes instanceof jqLite)) {
// jquery always rewraps, whereas we need to preserve the original selector so that we can
// modify it.
$compileNodes = jqLite($compileNodes);
}

$compileNodes.namespace = namespace || HTML_NAMESPACE;

// We can not compile top level text elements since text nodes can be merged and we will
// not be able to attach scope data to them, so we will wrap them in <span>
forEach($compileNodes, function(node, index){
Expand All @@ -867,16 +901,20 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
});
var compositeLinkFn =
compileNodes($compileNodes, transcludeFn, $compileNodes,
maxPriority, ignoreDirective, previousCompileContext);
maxPriority, ignoreDirective, previousCompileContext, namespace);
safeAddClass($compileNodes, 'ng-scope');
return function publicLinkFn(scope, cloneConnectFn, transcludeControllers, parentBoundTranscludeFn){
assertArg(scope, 'scope');
// important!!: we must call our jqLite.clone() since the jQuery one is trying to be smart
// and sometimes changes the structure of the DOM.
// NOTE: namespace passed into cloneJqLite on $compileNodes

var $linkNode = cloneConnectFn
? JQLitePrototype.clone.call($compileNodes) // IMPORTANT!!!
? $compileNodes.namespace.cloneJqLite($compileNodes) // IMPORTANT!!!
: $compileNodes;

$linkNode.namespace = $compileNodes.namespace;

forEach(transcludeControllers, function(instance, name) {
$linkNode.data('$' + name + 'Controller', instance);
});
Expand Down Expand Up @@ -914,34 +952,51 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
* @returns {Function} A composite linking function of all of the matched directives or null.
*/
function compileNodes(nodeList, transcludeFn, $rootElement, maxPriority, ignoreDirective,
previousCompileContext) {
previousCompileContext, namespace) {
var linkFns = [],
attrs, directives, nodeLinkFn, childNodes, childLinkFn, linkFnFound;

for (var i = 0; i < nodeList.length; i++) {
attrs = new Attributes();

var node = nodeList[i];
namespace = namespace || HTML_NAMESPACE;

var nodeTagName = nodeName_(node);
if(nodeTagName === 'svg') {
namespace = SVG_NAMESPACE;
}
// else if(nodeTagName === 'foreignobject') {
// namespace = HTML_NAMESPACE;
// }

nodeList.namespace = namespace;

// we must always refer to nodeList[i] since the nodes can be replaced underneath us.
directives = collectDirectives(nodeList[i], [], attrs, i === 0 ? maxPriority : undefined,
directives = collectDirectives(node, [], attrs, i === 0 ? maxPriority : undefined,
ignoreDirective);

nodeLinkFn = (directives.length)
? applyDirectivesToNode(directives, nodeList[i], attrs, transcludeFn, $rootElement,
null, [], [], previousCompileContext)
? applyDirectivesToNode(directives, node, attrs, transcludeFn, $rootElement,
null, [], [], previousCompileContext, namespace)
: null;

if (nodeLinkFn) {
nodeLinkFn.namespace = nodeLinkFn.namespace || namespace;
}

if (nodeLinkFn && nodeLinkFn.scope) {
safeAddClass(attrs.$$element, 'ng-scope');
}

childLinkFn = (nodeLinkFn && nodeLinkFn.terminal ||
!(childNodes = nodeList[i].childNodes) ||
!(childNodes = node.childNodes) ||
!childNodes.length)
? null
: compileNodes(childNodes,
nodeLinkFn ? (
(nodeLinkFn.transcludeOnThisElement || !nodeLinkFn.templateOnThisElement)
&& nodeLinkFn.transclude) : transcludeFn);
&& nodeLinkFn.transclude) : transcludeFn, undefined, undefined, undefined, undefined, namespace);

linkFns.push(nodeLinkFn, childLinkFn);
linkFnFound = linkFnFound || nodeLinkFn || childLinkFn;
Expand Down Expand Up @@ -999,7 +1054,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {

function createBoundTranscludeFn(scope, transcludeFn, previousBoundTranscludeFn) {

var boundTranscludeFn = function(transcludedScope, cloneFn, controllers) {
var boundTranscludeFn = function(transcludedScope, cloneFn, controllers, namespace) {
var scopeCreated = false;

if (!transcludedScope) {
Expand All @@ -1008,7 +1063,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
scopeCreated = true;
}

var clone = transcludeFn(transcludedScope, cloneFn, controllers, previousBoundTranscludeFn);
var clone = transcludeFn(transcludedScope, cloneFn, controllers, previousBoundTranscludeFn, namespace);
if (scopeCreated) {
clone.on('$destroy', function() { transcludedScope.$destroy(); });
}
Expand Down Expand Up @@ -1189,7 +1244,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
*/
function applyDirectivesToNode(directives, compileNode, templateAttrs, transcludeFn,
jqCollection, originalReplaceDirective, preLinkFns, postLinkFns,
previousCompileContext) {
previousCompileContext, namespace) {
previousCompileContext = previousCompileContext || {};

var terminalPriority = -Number.MAX_VALUE,
Expand Down Expand Up @@ -1276,6 +1331,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
$compileNode = templateAttrs.$$element =
jqLite(document.createComment(' ' + directiveName + ': ' +
templateAttrs[directiveName] + ' '));
$compileNode.namespace = namespace;
compileNode = $compileNode[0];
replaceWith(jqCollection, sliceArgs($template), compileNode);

Expand All @@ -1291,9 +1347,20 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
nonTlbTranscludeDirective: nonTlbTranscludeDirective
});
} else {
$template = jqLite(jqLiteClone(compileNode)).contents();
$compileNode.empty(); // clear contents
childTranscludeFn = compile($template, transcludeFn);
$template = $compileNode.contents();
$template.remove();
childTranscludeFn = (function($template) {
return function childTranscludeFnFactory() {
var namespaceArg = arguments[4];
var childTranscludeFn = childTranscludeFnFactory.fn;

if (!childTranscludeFn) {
childTranscludeFn = childTranscludeFnFactory.fn = compile($template, transcludeFn, undefined, undefined, undefined, namespaceArg);
}

return childTranscludeFn.apply(undefined, arguments);
}
}($template));
}
}

Expand All @@ -1313,7 +1380,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
if (jqLiteIsTextNode(directiveValue)) {
$template = [];
} else {
$template = jqLite(wrapTemplate(directive.type, trim(directiveValue)));
$template = jqLite(namespace.wrap(trim(directiveValue)));
}
compileNode = $template[0];

Expand All @@ -1325,6 +1392,14 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {

replaceWith(jqCollection, $compileNode, compileNode);

var compileNodeTagName = nodeName_($compileNode[0]);
if (compileNodeTagName === 'svg') {
nodeLinkFn.namespace = $compileNode.namespace = SVG_NAMESPACE;
} else if(compileNodeTagName=== 'foreignobject') {
nodeLinkFn.namespace = $compileNode.namespace = HTML_NAMESPACE;
}


var newTemplateAttrs = {$attr: {}};

// combine directives from the original node and from the template:
Expand Down Expand Up @@ -1604,6 +1679,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
for(i = postLinkFns.length - 1; i >= 0; i--) {
try {
linkFn = postLinkFns[i];
$element.namespace = nodeLinkFn.namespace;
linkFn(linkFn.isolateScope ? isolateScope : scope, $element, attrs,
linkFn.require && getControllers(linkFn.directiveName, linkFn.require, $element, elementControllers), transcludeFn);
} catch (e) {
Expand All @@ -1612,7 +1688,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
}

// This is the function that is injected as `$transclude`.
function controllersBoundTransclude(scope, cloneAttachFn) {
function controllersBoundTransclude(scope, cloneAttachFn, namespace) {
var transcludeControllers;

// no scope passed
Expand All @@ -1625,7 +1701,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
transcludeControllers = elementControllers;
}

return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers);
return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers, namespace);
}
}
}
Expand Down Expand Up @@ -1815,6 +1891,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
if (!(previousCompileContext.hasElementTranscludeDirective &&
origAsyncDirective.replace)) {
// it was cloned therefore we have to clone as well.
// NOTE: namespace is not taken into account here. Should it be?
linkNode = jqLiteClone(compileNode);
}

Expand Down
4 changes: 2 additions & 2 deletions src/ng/directive/ngTransclude.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ var ngTranscludeDirective = ngDirective({
startingTag($element));
}

$transclude(function(clone) {
$transclude(null, function(clone) {
$element.empty();
$element.append(clone);
});
}, $element.namespace);
}
});
Loading