Merge pull request #151 from angular-ui/fix-transclude-scope

fix(transclude): compile transclude elements with correct scope

Author: dimirc

src/select.js

@@ -599,14 +599,11 @@
               .attr('ng-mouseenter', '$select.setActiveItem('+$select.parserResult.itemName +')')
               .attr('ng-click', '$select.select(' + $select.parserResult.itemName + ')');
 
-          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);
+          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.attr('uis-transclude-append', ''); //Adding uisTranscludeAppend directive to row element after choices element has ngRepeat
 
-            rowsInner.append(clone);
-            $compile(element)(scope);
-          });
+          $compile(element, transcludeFn)(scope); //Passing current transcludeFn to be able to append elements correctly from uisTranscludeAppend
 
           scope.$watch('$select.search', function() {
             $select.activeIndex = 0;
@@ -622,7 +619,15 @@
       }
     };
   }])
-
+  .directive('uisTranscludeAppend', function () {
+    return {
+      link: function (scope, element, attrs, ctrl, transclude) {
+          transclude(scope, function (clone) {
+            element.append(clone);
+          });
+        }
+      };
+  })
   .directive('uiSelectMatch', ['uiSelectConfig', function(uiSelectConfig) {
     return {
       restrict: 'EA',

test/select.spec.js

@@ -510,4 +510,46 @@ describe('ui-select tests', function() {
 
   });
 
+  it('should append/transclude content (with correct scope) that users add at <match> tag', function () {
+
+    var el = compileTemplate(
+      '<ui-select ng-model="selection.selected"> \
+        <ui-select-match> \
+          <span ng-if="$select.selected.name!==\'Wladimir\'">{{$select.selected.name}}</span>\
+          <span ng-if="$select.selected.name===\'Wladimir\'">{{$select.selected.name | uppercase}}</span>\
+        </ui-select-match> \
+        <ui-select-choices repeat="person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name | highlight: $select.search"></div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    clickItem(el, 'Samantha');
+    expect(getMatchLabel(el).trim()).toEqual('Samantha');
+
+    clickItem(el, 'Wladimir');
+    expect(getMatchLabel(el).trim()).not.toEqual('Wladimir');
+    expect(getMatchLabel(el).trim()).toEqual('WLADIMIR');
+
+  });
+  it('should append/transclude content (with correct scope) that users add at <choices> tag', function () {
+
+    var el = compileTemplate(
+      '<ui-select ng-model="selection.selected"> \
+        <ui-select-match> \
+        </ui-select-match> \
+        <ui-select-choices repeat="person in people | filter: $select.search"> \
+          <div ng-bind-html="person.name | highlight: $select.search"></div> \
+          <div ng-if="person.name==\'Wladimir\'"> \
+            <span class="only-once">I should appear only once</span>\
+          </div> \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    expect($(el).find('.only-once').length).toEqual(1);
+
+
+  });
+
 });