feat(popover): support templates (WIP) angular-ui#1848

Author: RobJacobs

src/popover/docs/demo.html

@@ -2,14 +2,23 @@
     <h4>Dynamic</h4>
     <div class="form-group">
       <label>Popup Text:</label>
-      <input type="text" ng-model="dynamicPopover" class="form-control">
+      <input type="text" ng-model="dynamicPopover.content" class="form-control">
     </div>
     <div class="form-group">
       <label>Popup Title:</label>
-      <input type="text" ng-model="dynamicPopoverTitle" class="form-control">
+      <input type="text" ng-model="dynamicPopover.title" class="form-control">
     </div>
-    <button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">Dynamic Popover</button>
+    <button popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Dynamic Popover</button>
 
+    <button popover-window="templatePopover.html" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Popover With Template</button> 
+    
+    <script type="text/ng-template" id="templatePopover.html"> 
+      <div class="form-group"> 
+        <label>Popup Title:</label> 
+        <input type="text" ng-model="dynamicPopover.title" class="form-control"> 
+      </div> 
+    </script> 
+
     <hr />
     <h4>Positional</h4>
     <button popover-placement="top" popover="On the Top!" class="btn btn-default">Top</button>

src/popover/docs/demo.js

@@ -1,4 +1,6 @@
 angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
-  $scope.dynamicPopover = 'Hello, World!';
-  $scope.dynamicPopoverTitle = 'Title';
+  $scope.dynamicPopover = {
+    content: 'Hello, World!',
+    title: 'Title'
+  };
 });

src/popover/popover.js

@@ -5,11 +5,22 @@
  */
 angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
 
+.directive( 'popoverWindowPopup', function () {
+  return {
+    restrict: 'EA',
+    replace: true,
+    templateUrl: 'template/popover/popover-window.html'
+  };
+})
+
+.directive( 'popoverWindow', [ '$tooltip', function ( $tooltip ) {
+  return $tooltip( 'popoverWindow', 'popoverWindow', 'click' );
+}])
+
 .directive( 'popoverPopup', function () {
   return {
     restrict: 'EA',
     replace: true,
-    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/popover/popover.html'
   };
 })

src/tooltip/test/tooltip.spec.js

@@ -135,7 +135,6 @@ describe('tooltip', function() {
   }));
 
   it('should only have an isolate scope on the popup', inject( function ( $compile ) {
-    var ttScope;
 
     scope.tooltipMsg = 'Tooltip Text';
     scope.alt = 'Alt Message';
@@ -148,22 +147,21 @@ describe('tooltip', function() {
     scope.$digest();
     elm = elmBody.find( 'span' );
     elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
 
     elm.trigger( 'mouseenter' );
     expect( elm.attr( 'alt' ) ).toBe( scope.alt );
 
-    ttScope = angular.element( elmBody.children()[1] ).isolateScope();
-    expect( ttScope.placement ).toBe( 'top' );
-    expect( ttScope.content ).toBe( scope.tooltipMsg );
+    expect( tooltipScope.placement ).toBe('top');
+    expect( tooltipScope.content ).toBe(scope.tooltipMsg);
 
     elm.trigger( 'mouseleave' );
 
     //Isolate scope contents should be the same after hiding and showing again (issue 1191)
     elm.trigger( 'mouseenter' );
 
-    ttScope = angular.element( elmBody.children()[1] ).isolateScope();
-    expect( ttScope.placement ).toBe( 'top' );
-    expect( ttScope.content ).toBe( scope.tooltipMsg );
+    expect( tooltipScope.placement ).toBe('top');
+    expect( tooltipScope.content ).toBe(scope.tooltipMsg);
   }));
 
   it('should not show tooltips if there is nothing to show - issue #129', inject(function ($compile) {

src/tooltip/tooltip.js

@@ -36,9 +36,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
    *     $tooltipProvider.options( { placement: 'left' } );
    *   });
    */
-	this.options = function( value ) {
-		angular.extend( globalOptions, value );
-	};
+  this.options = function( value ) {
+    angular.extend( globalOptions, value );
+  };
 
   /**
    * This allows you to extend the set of trigger mappings available. E.g.:
@@ -202,7 +202,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
 
               // And show the tooltip.
               ttScope.isOpen = true;
-              ttScope.$digest(); // digest required as $apply is not called
+              ttScope.$apply(); // digest required as $apply is not called
 
               // Return positioning function as promise callback for correct
               // positioning after draw.
@@ -289,6 +289,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             }
 
             var unregisterTriggers = function () {
+              element.unbind(triggers.show, toggleTooltipBind);
               element.unbind(triggers.show, showTooltipBind);
               element.unbind(triggers.hide, hideTooltipBind);
             };
@@ -340,11 +341,29 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
   }];
 })
 
+.directive( 'tooltipTemplateTransclude', ['$http', '$compile', '$templateCache', function ($http ,  $compile ,  $templateCache) {
+  return {
+    link: function ( scope, elem, attrs ) {
+      if (scope.content) {
+        // TODO: How to solve the problem of pre-loading the template?
+        // TODO: Should this be watching for changes in scope.content?
+        var templateUrl = scope.content,
+        transcludeScope = scope.$parent.$parent;
+
+        $http.get( templateUrl, { cache: $templateCache })
+          .then(function (response) {
+            elem.html(response.data);
+            $compile(elem.contents())(transcludeScope);
+          });
+      }
+    }
+  };
+}])
+
 .directive( 'tooltipPopup', function () {
   return {
     restrict: 'EA',
     replace: true,
-    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-popup.html'
   };
 })
@@ -357,11 +376,11 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
   return {
     restrict: 'EA',
     replace: true,
-    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html'
   };
 })
 
 .directive( 'tooltipHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
   return $tooltip( 'tooltipHtmlUnsafe', 'tooltip', 'mouseenter' );
 }]);
+

template/popover/popover-window.html

@@ -0,0 +1,7 @@
+<div class="popover {{placement}}" ng-class="{ in: isOpen, fade: animation }">
+  <div class="arrow"></div>
+  <div class="popover-inner">
+    <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
+    <div class="popover-content" tooltip-template-transclude></div>
+  </div>
+</div>

template/popover/popover.html

@@ -1,4 +1,4 @@
-<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="popover {{placement}}" ng-class="{ in: isOpen, fade: animation }">
   <div class="arrow"></div>
 
   <div class="popover-inner">

template/tooltip/tooltip-html-unsafe-popup.html

@@ -1,4 +1,4 @@
-<div class="tooltip {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip {{placement}}" ng-class="{ in: isOpen, fade: animation }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" bind-html-unsafe="content"></div>
 </div>

template/tooltip/tooltip-popup.html

@@ -1,4 +1,4 @@
-<div class="tooltip {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip {{placement}}" ng-class="{ in: isOpen, fade: animation }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" ng-bind="content"></div>
 </div>