feat(tooltip): remove replace usage

- Remove `replace: true` usage BREAKING CHANGE: The template structure changed slightly due to the removal of `replace: true` - see documentation examples in action to see differences in practice. Closes #5994
angular-ui · Jul 19, 2016 · 1616e97 · 1616e97
1 parent b77f02c
commit 1616e97
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 74 deletions.
diff --git a/src/popover/popover.js b/src/popover/popover.js
@@ -7,9 +7,8 @@ angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 
 .directive('uibPopoverTemplatePopup', function() {
   return {
-    replace: true,
-    scope: { uibTitle: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
-      originScope: '&' },
+    restrict: 'A',
+    scope: { uibTitle: '@', contentExp: '&', originScope: '&' },
     templateUrl: 'uib/template/popover/popover-template.html'
   };
 })
@@ -22,8 +21,8 @@ angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 
 .directive('uibPopoverHtmlPopup', function() {
   return {
-    replace: true,
-    scope: { contentExp: '&', uibTitle: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    restrict: 'A',
+    scope: { contentExp: '&', uibTitle: '@' },
     templateUrl: 'uib/template/popover/popover-html.html'
   };
 })
@@ -36,8 +35,8 @@ angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 
 .directive('uibPopoverPopup', function() {
   return {
-    replace: true,
-    scope: { uibTitle: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    restrict: 'A',
+    scope: { uibTitle: '@', content: '@' },
     templateUrl: 'uib/template/popover/popover.html'
   };
 })

diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js
@@ -179,7 +179,6 @@ describe('tooltip', function() {
     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);
 
     trigger(elm, 'mouseleave');
@@ -188,7 +187,6 @@ describe('tooltip', function() {
     trigger(elm, 'mouseenter');
 
     ttScope = angular.element(elmBody.children()[1]).isolateScope();
-    expect(ttScope.placement).toBe('top');
     expect(ttScope.content).toBe(scope.tooltipMsg);
   }));
 

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -126,12 +126,11 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
           (options.useContentExp ?
             'content-exp="contentExp()" ' :
             'content="' + startSym + 'content' + endSym + '" ') +
-          'placement="' + startSym + 'placement' + endSym + '" ' +
-          'popup-class="' + startSym + 'popupClass' + endSym + '" ' +
-          'animation="animation" ' +
-          'is-open="isOpen" ' +
           'origin-scope="origScope" ' +
-          'class="uib-position-measure"' +
+          'class="uib-position-measure ' + prefix + '" ' +
+          'tooltip-animation-class="fade"' +
+          'uib-tooltip-classes ' +
+          'ng-class="{ in: isOpen }" ' +
           '>' +
         '</div>';
 
@@ -667,7 +666,7 @@ function ($animate, $sce, $compile, $templateRequest) {
         element.addClass(scope.popupClass);
       }
 
-      if (scope.animation()) {
+      if (scope.animation) {
         element.addClass(attrs.tooltipAnimationClass);
       }
     }
@@ -676,8 +675,8 @@ function ($animate, $sce, $compile, $templateRequest) {
 
 .directive('uibTooltipPopup', function() {
   return {
-    replace: true,
-    scope: { content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    restrict: 'A',
+    scope: { content: '@' },
     templateUrl: 'uib/template/tooltip/tooltip-popup.html'
   };
 })
@@ -688,9 +687,8 @@ function ($animate, $sce, $compile, $templateRequest) {
 
 .directive('uibTooltipTemplatePopup', function() {
   return {
-    replace: true,
-    scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
-      originScope: '&' },
+    restrict: 'A',
+    scope: { contentExp: '&', originScope: '&' },
     templateUrl: 'uib/template/tooltip/tooltip-template-popup.html'
   };
 })
@@ -703,8 +701,8 @@ function ($animate, $sce, $compile, $templateRequest) {
 
 .directive('uibTooltipHtmlPopup', function() {
   return {
-    replace: true,
-    scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    restrict: 'A',
+    scope: { contentExp: '&' },
     templateUrl: 'uib/template/tooltip/tooltip-html-popup.html'
   };
 })

diff --git a/template/popover/popover-html.html b/template/popover/popover-html.html
@@ -1,11 +1,6 @@
-<div class="popover"
-  tooltip-animation-class="fade"
-  uib-tooltip-classes
-  ng-class="{ in: isOpen() }">
-  <div class="arrow"></div>
+<div class="arrow"></div>
 
-  <div class="popover-inner">
-      <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
-      <div class="popover-content" ng-bind-html="contentExp()"></div>
-  </div>
+<div class="popover-inner">
+    <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
+    <div class="popover-content" ng-bind-html="contentExp()"></div>
 </div>
diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html
@@ -1,13 +1,8 @@
-<div class="popover"
-  tooltip-animation-class="fade"
-  uib-tooltip-classes
-  ng-class="{ in: isOpen() }">
-  <div class="arrow"></div>
+<div class="arrow"></div>
 
-  <div class="popover-inner">
-      <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
-      <div class="popover-content"
-        uib-tooltip-template-transclude="contentExp()"
-        tooltip-template-transclude-scope="originScope()"></div>
-  </div>
+<div class="popover-inner">
+    <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
+    <div class="popover-content"
+      uib-tooltip-template-transclude="contentExp()"
+      tooltip-template-transclude-scope="originScope()"></div>
 </div>
diff --git a/template/popover/popover.html b/template/popover/popover.html
@@ -1,11 +1,6 @@
-<div class="popover"
-  tooltip-animation-class="fade"
-  uib-tooltip-classes
-  ng-class="{ in: isOpen() }">
-  <div class="arrow"></div>
+<div class="arrow"></div>
 
-  <div class="popover-inner">
-      <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
-      <div class="popover-content" ng-bind="content"></div>
-  </div>
+<div class="popover-inner">
+    <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
+    <div class="popover-content" ng-bind="content"></div>
 </div>
diff --git a/template/tooltip/tooltip-html-popup.html b/template/tooltip/tooltip-html-popup.html
@@ -1,7 +1,2 @@
-<div class="tooltip"
-  tooltip-animation-class="fade"
-  uib-tooltip-classes
-  ng-class="{ in: isOpen() }">
-  <div class="tooltip-arrow"></div>
-  <div class="tooltip-inner" ng-bind-html="contentExp()"></div>
-</div>
+<div class="tooltip-arrow"></div>
+<div class="tooltip-inner" ng-bind-html="contentExp()"></div>
diff --git a/template/tooltip/tooltip-popup.html b/template/tooltip/tooltip-popup.html
@@ -1,7 +1,2 @@
-<div class="tooltip"
-  tooltip-animation-class="fade"
-  uib-tooltip-classes
-  ng-class="{ in: isOpen() }">
-  <div class="tooltip-arrow"></div>
-  <div class="tooltip-inner" ng-bind="content"></div>
-</div>
+<div class="tooltip-arrow"></div>
+<div class="tooltip-inner" ng-bind="content"></div>
diff --git a/template/tooltip/tooltip-template-popup.html b/template/tooltip/tooltip-template-popup.html
@@ -1,9 +1,4 @@
-<div class="tooltip"
-  tooltip-animation-class="fade"
-  uib-tooltip-classes
-  ng-class="{ in: isOpen() }">
-  <div class="tooltip-arrow"></div>
-  <div class="tooltip-inner"
-    uib-tooltip-template-transclude="contentExp()"
-    tooltip-template-transclude-scope="originScope()"></div>
-</div>
+<div class="tooltip-arrow"></div>
+<div class="tooltip-inner"
+  uib-tooltip-template-transclude="contentExp()"
+  tooltip-template-transclude-scope="originScope()"></div>