jquery detach on angular directive

在angular中會有基本的jquery-lite，也就是angular.element，當在include angular之前，就先include jquery，此時angular的jquery-lite，就會被自動替換成jquery。

替換angular.element的source code如下：

function bindJQuery() {
  // bind to jQuery if present;
  jQuery = window.jQuery;
  // reset to jQuery or default to us.
  if (jQuery) {
    jqLite = jQuery;
    extend(jQuery.fn, {
      scope: JQLitePrototype.scope,
      isolateScope: JQLitePrototype.isolateScope,
      controller: JQLitePrototype.controller,
      injector: JQLitePrototype.injector,
      inheritedData: JQLitePrototype.inheritedData
    });   
    // Method signature:
    //     jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments)
    jqLitePatchJQueryRemove('remove', true, true, false);
    jqLitePatchJQueryRemove('empty', false, false, false);
    jqLitePatchJQueryRemove('html', false, false, true);
  } else {
    jqLite = JQLite;
  }  
  angular.element = jqLite;
}

另外一個需要注意的地方就是jqLitePatchJQueryRemove，會將jquery原生的function，多經過一層處理，處理完在呼叫jquery的function。

jqLitePatchJQueryRemove的source如下：

function jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments) {     
  var originalJqFn = jQuery.fn[name];
  originalJqFn = originalJqFn.$original || originalJqFn;
  removePatch.$original = originalJqFn;
  jQuery.fn[name] = removePatch;
          
  function removePatch(param) {
    // jshint -W040
    var list = filterElems && param ? [this.filter(param)] : [this],
        fireEvent = dispatchThis,
        set, setIndex, setLength,
        element, childIndex, childLength, children;
          
    if (!getterIfNoArguments || param != null) {
      while(list.length) {
        set = list.shift();
        for(setIndex = 0, setLength = set.length; setIndex < setLength; setIndex++) {
          element = jqLite(set[setIndex]);
          if (fireEvent) {
            element.triggerHandler('$destroy');
          } else {
            fireEvent = !fireEvent;
          }
          for(childIndex = 0, childLength = (children = element.children()).length;
              childIndex < childLength;
              childIndex++) {
            list.push(jQuery(children[childIndex]));
          }
        } 
      }   
    }     
    return originalJqFn.apply(this, arguments);
  }       
}

其中element.triggerHandler('$destroy')會告知angular底下的transcludedScope，這個element已經被摧毀了，所以會導致，$element.detach的時候，transcludedScope無法被更新。element.triggerHandler('$destroy')的監聽event可以參考createBoundTranscludeFn這個function，會有下這段code去監聽：

clone.on('$destroy', bind(transcludedScope, transcludedScope.$destroy));

在jqLitePatchJQueryRemove只替換remove、empty、html，而沒有替換detach，使用detach卻會影響scope，真正原因要找jquery的source code。

因為detach間接呼叫了remove：

detach: function( selector ) {
	return this.remove( selector, true );
}

Example(1.2.7)：

• directive在ready中呼叫$element.detach：此時transclude裡面的scope將會失效。
• directive在ready之前呼叫$element.detach：transclude尚未被建立，自然而然就不會處理$destroy的event，transclude裡的scope仍然會work。

由此可知，只要scope尚未ready時，呼叫detach就不會中斷scope的更新。若要讓directive的scope正常運作，可用以下方式：

1. 不使用transclude
2. 不在scope ready中，使用detach
3. 使用原生api
4. 最後一種方式，jquery在angular之後include

如果不是這麼需要使用到jquery，建議就不要include了，當然jquery也提供很多方便的功能，依照project需求自己評估吧！