feat(transclude): use directive instead of class to mark injection point

Author: dimirc

src/select.js

@@ -354,27 +354,6 @@ angular.module('ui.select', [])
         $document.off('click', onDocumentClick);
       });
 
-      // Move transcluded elements to their correct position in main template
-      transcludeFn(scope, function(clone) {
-        // See Transclude in AngularJS http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html
-
-        // One day jqLite will be replaced by jQuery and we will be able to write:
-        // var transcludedElement = clone.filter('.my-class')
-        // instead of creating a hackish DOM element:
-        var transcluded = angular.element('<div>').append(clone);
-
-        var transcludedMatch = transcluded.querySelectorAll('.ui-select-match');
-        if (transcludedMatch.length !== 1) {
-          throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-match but got '{0}'.", transcludedMatch.length);
-        }
-        element.querySelectorAll('.ui-select-match').replaceWith(transcludedMatch);
-
-        var transcludedChoices = transcluded.querySelectorAll('.ui-select-choices');
-        if (transcludedChoices.length !== 1) {
-          throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length);
-        }
-        element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices);
-      });
     }
   };
 }])
@@ -406,17 +385,8 @@ angular.module('ui.select', [])
         rows.attr('ng-repeat', RepeatParser.getNgRepeatExpression(repeat.lhs, '$select.items', repeat.trackByExp))
             .attr('ng-mouseenter', '$select.activeIndex = $index')
             .attr('ng-click', '$select.select(' + repeat.lhs + ')');
-
-
-        transcludeFn(function(clone) {
-          var rowsInner = element.querySelectorAll('.ui-select-choices-row-inner');
-          if (rowsInner.length !== 1)
-            throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row-inner but got '{0}'.", rowsInner.length);
-            
-          rowsInner.append(clone);
-          $compile(element)(scope);
-        });
-
+        
+        $compile(element)(scope);
         $select.parseRepeatAttr(attrs.repeat);
 
         scope.$watch('$select.search', function() {
@@ -453,6 +423,38 @@ angular.module('ui.select', [])
   };
 }])
 
+
+.directive( 'transinject', function($compile, uiSelectMinErr) {
+    return {
+        link: function( scope, element, attrs, controller, transcludeFn ) {
+
+            if (!transcludeFn){
+              return;
+            }
+
+            transcludeFn( scope, function( clone ) {
+
+              var injecting = clone;
+
+              if (attrs.transinject){
+                var cloneContainer = angular.element('<div>').append(clone);
+                var cloneFiltered = cloneContainer.querySelectorAll(attrs.transinject);
+
+                if (cloneFiltered.length !== 1) {
+                  throw uiSelectMinErr('transcluded', "Expected 1 .xxx but got '{0}'.", cloneFiltered.length);
+                }
+
+                injecting = cloneFiltered;
+              }
+
+              element.empty();
+              element.append( injecting );
+
+            });
+        }
+    };
+})
+
 /**
  * Highlights text that matches $select.search.
  *

src/select2/choices.tpl.html

@@ -1,5 +1,5 @@
 <ul class="ui-select-choices ui-select-choices-content select2-results">
   <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.activeIndex === $index}">
-    <div class="select2-result-label ui-select-choices-row-inner"></div>
+    <div class="select2-result-label" transinject></div>
   </li>
 </ul>

src/select2/match.tpl.html

@@ -7,6 +7,6 @@
    ng-class="{'select2-default': $select.selected === undefined}"
    ng-click="$select.activate()">
   <span ng-hide="$select.selected !== undefined" class="select2-chosen">{{$select.placeholder}}</span>
-  <span ng-show="$select.selected !== undefined" class="select2-chosen" ng-transclude></span>
+  <span ng-show="$select.selected !== undefined" class="select2-chosen" transinject></span>
   <span class="select2-arrow"><b></b></span>
 </a>

src/select2/select.tpl.html

@@ -1,14 +1,14 @@
 <div class="select2 select2-container"
      ng-class="{'select2-container-active select2-dropdown-open': $select.open,
                 'select2-container-disabled': $select.disabled}">
-  <div class="ui-select-match"></div>
+  <div transinject=".ui-select-match"></div>
   <div class="select2-drop select2-with-searchbox select2-drop-active"
        ng-class="{'select2-display-none': !$select.open}">
     <div class="select2-search">
       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
              class="ui-select-search select2-input"
              ng-model="$select.search">
     </div>
-    <div class="ui-select-choices"></div>
+    <div transinject=".ui-select-choices"></div>
   </div>
 </div>