Merge pull request #91 from angular-ui/fix-transclude

Fixes transclusion on angular v1.2.18+

Author: dimirc

bower.json

@@ -16,11 +16,11 @@
     "test"
   ],
   "dependencies": {
-    "angular": "1.2.0 - 1.2.17"
+    "angular": "~1.2"
   },
   "devDependencies": {
     "jquery": "~1.11",
-    "angular-sanitize": "1.2.0 - 1.2.17",
-    "angular-mocks": "1.2.0 - 1.2.17"
+    "angular-sanitize": "~1.2",
+    "angular-mocks": "~1.2"
   }
 }

examples/demo.html

@@ -18,8 +18,8 @@
     </script>
   <![endif]-->
 
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
 
   <!-- ui-select files -->

src/bootstrap/choices.tpl.html

@@ -2,6 +2,6 @@
     role="menu" aria-labelledby="dLabel"
     ng-show="$select.items.length > 0">
   <li class="ui-select-choices-row" ng-class="{active: $select.activeIndex === $index}">
-    <a href="javascript:void(0)" ng-transclude></a>
+    <a class="ui-select-choices-row-inner" href="javascript:void(0)"></a>
   </li>
 </ul>

src/select.js

@@ -380,8 +380,8 @@ angular.module('ui.select', [])
 }])
 
 .directive('uiSelectChoices',
-  ['uiSelectConfig', 'RepeatParser', 'uiSelectMinErr',
-  function(uiSelectConfig, RepeatParser, uiSelectMinErr) {
+  ['uiSelectConfig', 'RepeatParser', 'uiSelectMinErr', '$compile',
+  function(uiSelectConfig, RepeatParser, uiSelectMinErr, $compile) {
 
   return {
     restrict: 'EA',
@@ -396,17 +396,27 @@ angular.module('ui.select', [])
 
     compile: function(tElement, tAttrs) {
       var repeat = RepeatParser.parse(tAttrs.repeat);
+      return function link(scope, element, attrs, $select, transcludeFn) {
+  
+        var rows = element.querySelectorAll('.ui-select-choices-row');
+        if (rows.length !== 1) {
+          throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row but got '{0}'.", rows.length);
+        }
 
-      var rows = tElement.querySelectorAll('.ui-select-choices-row');
-      if (rows.length !== 1) {
-        throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row but got '{0}'.", rows.length);
-      }
+        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 + ')');
 
-      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 + ')');
 
-      return function link(scope, element, attrs, $select) {
+        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);
+        });
+
         $select.parseRepeatAttr(attrs.repeat);
 
         scope.$watch('$select.search', function() {
@@ -455,6 +465,6 @@ angular.module('ui.select', [])
   }
 
   return function(matchItem, query) {
-    return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<span class="ui-select-highlight">$&</span>') : matchItem;
+    return query && matchItem ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<span class="ui-select-highlight">$&</span>') : matchItem;
   };
 });

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" ng-transclude></div>
+    <div class="select2-result-label ui-select-choices-row-inner"></div>
   </li>
 </ul>

src/selectize/choices.tpl.html

@@ -2,7 +2,7 @@
   <div class="ui-select-choices-content selectize-dropdown-content">
     <div class="ui-select-choices-row"
          ng-class="{'active': $select.activeIndex === $index}">
-      <div class="option" data-selectable ng-transclude></div>
+      <div class="option ui-select-choices-row-inner" data-selectable></div>
     </div>
   </div>
 </div>