transcluded linkFns should be terminal

yyx990803 · yyx990803 · commit 7b8459493503 · 2015-04-23T05:33:14.000-04:00
diff --git a/src/compiler/compile.js b/src/compiler/compile.js
@@ -50,7 +50,7 @@ function compile (el, options, partial, transcluded) {
    * @return {Function|undefined}
    */
 
-  return function link (vm, el) {
+  function linkFn (vm, el) {
     var originalDirCount = vm._directives.length
     var parentOriginalDirCount =
       vm.$parent && vm.$parent._directives.length
@@ -65,6 +65,7 @@ function compile (el, options, partial, transcluded) {
     // passed down.
     var source = transcluded ? vm.$parent : vm
     var host = transcluded ? vm : undefined
+    // link
     if (nodeLinkFn) nodeLinkFn(source, el, host)
     if (childLinkFn) childLinkFn(source, childNodes, host)
 
@@ -97,6 +98,14 @@ function compile (el, options, partial, transcluded) {
       }
     }
   }
+
+  // transcluded linkFns are terminal, because it takes
+  // over the entire sub-tree.
+  if (transcluded) {
+    linkFn.terminal = true
+  }
+
+  return linkFn
 }
 
 /**
diff --git a/test/unit/specs/compiler/compile_spec.js b/test/unit/specs/compiler/compile_spec.js
@@ -204,5 +204,40 @@ if (_.inBrowser) {
       expect(vm._bindDir.calls.count()).toBe(0)
     })
 
+    it('should handle nested transclusions', function (done) {
+      vm = new Vue({
+        el: el,
+        template:
+          '<div v-component="a">' +
+            '<div v-component="b">' +
+              '<div v-repeat="list">{{$value}}</div>' +
+            '</div>' +
+          '</div>',
+        data: {
+          list: [1,2]
+        },
+        components: {
+          a: { template: '<content></content>' },
+          b: { template: '<content></content>' }
+        }
+      })
+      expect(el.innerHTML).toBe(
+        '<div><div>' +
+          '<div>1</div><div>2</div><!--v-repeat-->' +
+        '</div><!--v-component-->' +
+        '</div><!--v-component-->'
+      )
+      vm.list.push(3)
+      _.nextTick(function () {
+        expect(el.innerHTML).toBe(
+          '<div><div>' +
+            '<div>1</div><div>2</div><div>3</div><!--v-repeat-->' +
+          '</div><!--v-component-->' +
+          '</div><!--v-component-->'
+        )
+        done()
+      })
+    })
+
   })
 }
