refactored quickClone to cloneNode and exposed it on jQuery

mhevery · mhevery · commit 496e6bf9016d · 2011-02-16T00:49:16.000-05:00
diff --git a/docs/angular.element.ngdoc b/docs/angular.element.ngdoc
@@ -40,9 +40,14 @@ raw DOM references.
 - [text()](http://api.jquery.com/text/)
 - [trigger()](http://api.jquery.com/trigger/)
 
-## Additionally these methods are available in both jQuery and jQuery lite version.
+## Additionally these methods extend the jQuery and  are available in both jQuery and jQuery lite
+version:
 
 - `scope()` - retrieves the current angular scope of the element.
+- `cloneNode()` - Clones the current node, ensuring identical structure. This is important since
+       the `clone()` method implemented by jQuery under some circumstances changes the DOM
+       structure, which then prevents proper application of compiled template to the cloned node.
+       __Always use `cloneNode()` when cloning previously compiled templates.__
 
 @param {string|DOMElement} element HTML string or DOMElement to be wrapped into jQuery.
 @returns {Object} jQuery object.
diff --git a/src/Angular.js b/src/Angular.js
@@ -453,10 +453,6 @@ if (msie) {
   };
 }
 
-function quickClone(element) {
-  return jqLite(element[0].cloneNode(true));
-}
-
 function isVisible(element) {
   var rect = element[0].getBoundingClientRect(),
       width = (rect.width || (rect.right||0 - rect.left||0)),
@@ -1034,9 +1030,23 @@ function bindJQuery(){
   // reset to jQuery or default to us.
   if (window.jQuery) {
     jqLite = window.jQuery;
-    jqLite.fn.scope = JQLite.prototype.scope;
+    extend(jqLite.fn, {
+      scope: JQLite.prototype.scope,
+      cloneNode: cloneNode
+    });
   } else {
     jqLite = jqLiteWrap;
   }
   angular.element = jqLite;
 }
+
+/**
+ * throw error of the argument is falsy.
+ */
+function assertArg(arg, name) {
+  if (!arg) {
+    var error = new Error("Argument '" + name + "' is required");
+    if (window.console) window.console.log(error.stack);
+    throw error;
+  }
+};
diff --git a/src/jqLite.js b/src/jqLite.js
@@ -251,8 +251,10 @@ JQLite.prototype = {
     return jqLite(this[0].parentNode);
   },
 
-  clone: function() { return jqLite(this[0].cloneNode(true)); }
+  clone: cloneNode,
+  cloneNode: cloneNode
 };
+function cloneNode() { return jqLite(this[0].cloneNode(true)); }
 
 if (msie) {
   extend(JQLite.prototype, {
diff --git a/src/widgets.js b/src/widgets.js
@@ -790,7 +790,7 @@ var ngSwitch = angularWidget('ng:switch', function (element){
       forEach(cases, function(switchCase){
         if (!found && switchCase.when(childScope, value)) {
           found = true;
-          var caseElement = quickClone(switchCase.element);
+          var caseElement = switchCase.element.cloneNode();
           element.append(caseElement);
           childScope.$tryEval(switchCase.change, element);
           switchCase.template(caseElement, childScope);
@@ -943,8 +943,7 @@ angularWidget("@ng:repeat", function(expression, element){
             childScope.$position = index == 0 ?
                 'first' :
                   (index == collectionLength - 1 ? 'last' : 'middle');
-            cloneElement = quickClone(element);
-            lastElement.after(cloneElement);
+            lastElement.after(cloneElement = element.cloneNode());
             cloneElement.attr('ng:repeat-index', index);
             linker(cloneElement, childScope);
             children.push(childScope);
