feat(popoverWindow): support template urls (WIP)

Proof of concept
chrisirhc · Feb 24, 2014 · 0a1510c · 0a1510c
1 parent 96b980e
commit 0a1510c
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/src/popover/popover.js b/src/popover/popover.js
@@ -5,6 +5,18 @@
  */
 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',

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -101,13 +101,15 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
 
       return {
         restrict: 'EA',
+        controller: angular.noop,
+        controllerAs: 'tooltipCtrl',
         scope: {
           title: '@' + prefix + 'Title'
         },
         compile: function (tElem, tAttrs) {
           var tooltipLinker = $compile( template );
 
-          return function link ( scope, element, attrs ) {
+          return function link ( scope, element, attrs, tooltipCtrl ) {
             var tooltip, tooltipScope;
             var transitionTimeout;
             var popupTimeout;
@@ -125,6 +127,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               tooltip.css( ttPosition );
             };
 
+            // Set up the correct scope
+            tooltipCtrl.scope = scope.$parent;
+
             // By default, the tooltip is not open.
             // TODO add ability to start tooltip opened
             scope.isOpen = false;
@@ -225,7 +230,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               tooltip = tooltipLinker(tooltipScope, function () {});
 
               // Get contents rendered into the tooltip
-              scope.$digest();
+              // Apply is required in order to make it work with rendering templates
+              scope.$apply();
             }
 
             function removeTooltip() {
@@ -309,6 +315,32 @@ 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.tooltipCtrl && 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.tooltipCtrl.scope.$new();
+        $http.get( templateUrl, { cache: $templateCache })
+        .then(function (response) {
+          elem.html(response.data);
+          $compile(elem.contents())(transcludeScope);
+        });
+
+        // Manual destruction because the transclude isn't a descendent of the
+        // current scope
+        scope.$on('$destroy', function () {
+          transcludeScope.$destroy();
+        });
+      }
+    }
+  };
+}])
+
 .directive( 'tooltipPopup', function () {
   return {
     restrict: 'EA',

diff --git a/template/popover/popover-window.html b/template/popover/popover-window.html
@@ -0,0 +1,8 @@
+<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>