fix(tooltip): Transcludes contents to allow dynamic selector text

A dynamic selector did not work as the contents of the directive element
were not transcluded. This fix adds transclusion through a new directive
controller method. It also includes a new test for this case (through an
ngRepeat) as well as a modified demo to show this use case.

Closes #69

Author: Josh David Miller

src/tooltip/docs/demo.html

@@ -1,8 +1,9 @@
 <div ng-controller="TooltipDemoCtrl">
   <div class="well">
-    <div>Dynamic Tooltip Text: <input ng-model="dynamicTooltip"></input></div>
+    <div>Dynamic Tooltip Text: <input ng-model="dynamicTooltipText"></input></div>
+    <div>Dynamic Tooltip Popup Text: <input ng-model="dynamicTooltip"></input></div>
     <p>
-      Pellentesque <a><span tooltip="{{dynamicTooltip}}">dynamic</span></a>,
+      Pellentesque <a><span tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</span></a>,
       sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
       aliquam. Tincidunt lobortis feugiat vivamus at 
       <a><span tooltip-placement="left" tooltip="On the Left!">left</span></a> eget

src/tooltip/docs/demo.js

@@ -1,3 +1,4 @@
 var TooltipDemoCtrl = function ($scope) {
   $scope.dynamicTooltip = "Hello, World!";
+  $scope.dynamicTooltipText = "dynamic";
 };

src/tooltip/test/tooltipSpec.js

@@ -60,6 +60,35 @@ describe('tooltip', function() {
     expect( elmScope.placement ).toBe( "bottom" );
   }));
 
+  it('should work inside an ngRepeat', inject( function( $compile ) {
+
+    elm = $compile( angular.element( 
+      '<ul>'+
+        '<li ng-repeat="item in items">'+
+          '<span id="selector" tooltip="{{item.tooltip}}">{{item.name}}</span>'+
+        '</li>'+
+      '</ul>'
+    ) )( scope );
+
+    scope.items = [
+      { name: "One", tooltip: "First Tooltip" }
+    ];
+    
+    scope.$digest();
+    
+    var tt = angular.element( elm.find("li > span")[0] );
+    
+    tt.trigger( 'mouseenter' );
+
+    // Due to the transclusion, the contents of the element are in a span, so
+    // we select the tooltip's child and ensure its content matches.
+    expect( tt.children().text() ).toBe( scope.items[0].name );
+
+    // And the tooltip text should still match.
+    expect( tt.scope().tooltipTitle ).toBe( scope.items[0].tooltip );
+
+    tt.trigger( 'mouseleave' );
+  }));
 });
 
 

src/tooltip/tooltip.js

@@ -17,7 +17,13 @@ angular.module( 'ui.bootstrap.tooltip', [] )
     '<tooltip-popup></tooltip-popup>';
 
   return {
+    transclude: true,
     scope: { tooltipTitle: '@tooltip', placement: '@tooltipPlacement', animation: '&tooltipAnimation' },
+    controller: ['$transclude', '$element', function($transclude, $element) {
+      $transclude(function(clone) {
+        $element.append(clone);
+      });
+    }],
     link: function ( scope, element, attr ) {
       var tooltip = $compile( template )( scope ), 
           transitionTimeout;