call attach/detach hooks for transcluded components inside v-if (fix vuejs#684)

yyx990803 · yyx990803 · commit 3a9bfff2688a · 2015-04-18T01:05:20.000-04:00
diff --git a/src/directives/if.js b/src/directives/if.js
@@ -53,6 +53,14 @@ module.exports = {
         ;(this.contentPositions = this.contentPositions || []).push(i)
       }
     }
+    // keep track of any transcluded components contained within
+    // the conditional block. we need to call attach/detach hooks
+    // for them.
+    this.transCpnts =
+      this.vm._transCpnts &&
+      this.vm._transCpnts.filter(function (c) {
+        return el.contains(c.$el)
+      })
   },
 
   update: function (value) {
@@ -87,6 +95,9 @@ module.exports = {
       : vm.$compile(frag)
     transition.blockAppend(frag, this.end, vm)
     this.children = vm._children.slice(originalChildLength)
+    if (this.transCpnts) {
+      this.children = this.children.concat(this.transCpnts)
+    }
     if (this.children.length && _.inDoc(vm.$el)) {
       this.children.forEach(function (child) {
         child._callHook('attached')
diff --git a/test/unit/specs/directives/if_spec.js b/test/unit/specs/directives/if_spec.js
@@ -212,5 +212,32 @@ if (_.inBrowser) {
       })
     })
 
+    it('call attach/detach for transcluded components', function (done) {
+      document.body.appendChild(el)
+      var attachSpy = jasmine.createSpy('attached')
+      var detachSpy = jasmine.createSpy('detached')
+      var vm = new Vue({
+        el: el,
+        data: { show: true },
+        template: '<div v-component="outer"><div v-component="transcluded"></div></div>',
+        components: {
+          outer: {
+            template: '<div v-if="$parent.show"><content></content></div>'
+          },
+          transcluded: {
+            template: 'transcluded',
+            attached: attachSpy,
+            detached: detachSpy
+          }
+        }
+      })
+      expect(attachSpy).toHaveBeenCalled()
+      vm.show = false
+      _.nextTick(function () {
+        expect(detachSpy).toHaveBeenCalled()
+        done()
+      })
+    })
+
   })
 }
