All geek questions in one place

Angular Error UIBootstrap popover

Getting an example from http://angular-ui.imtqy.com/bootstrap/ and the following instructions I did:

<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn btn-default">Mouseenter</button>

and when I moved the mouse over the button, I got:

  • Uncaught TypeError: cannot read the "split" property from undefined ui-bootstrap-tpls-0.11.2.min.js: 8
  • positionElementsui-bootstrap-VDU-0.11.2.min.js: 8
  • Zui-bootstrap-VDU-0.11.2.min.js: 9
  • PUI-bootstrap-VDU-0.11.2.min.js: 9
  • Kui-bootstrap-VDU-0.11.2.min.js: 9
  • b.event.special. (anonymous function) .handlejquery.min.js: 4
  • b.event.dispatchjquery.min.js: 3
  • v.handlejquery.min.js: 3

There I found an instruction: "The popover directives require the $ position service." But I have no idea what that means. I am new, so please help me. Maybe you need initialization? I can not find it on the official website

+5
source share
3 answers

The popover-placement job fixed the problem for me.

Example:

 <input type="number" popover-placement="top" popover="This is some text that explains something" popover-trigger="focus">
+6
source

The problem seems to be related to the placement / position of tooltips and popovers. This has something to do with the changes in angular.isDefined, which work differently in AngularJS 1.2 and 1.3

Here are some guidelines to fix problems by setting default values.

  // Bootstrap UI fixes after upgrading to Angular 1.3 .directive('tooltip', function() { return { restrict: 'EA', link: function(scope, element, attrs) { attrs.tooltipPlacement = attrs.tooltipPlacement || 'top'; attrs.tooltipAnimation = attrs.tooltipAnimation || true; attrs.tooltipPopupDelay = attrs.tooltipPopupDelay || 0; attrs.tooltipTrigger = attrs.tooltipTrigger || 'mouseenter'; attrs.tooltipAppendToBody = attrs.tooltipAppendToBody || false; } } }) .directive('popover', function() { return { restrict: 'EA', link: function(scope, element, attrs) { attrs.popoverPlacement = attrs.popoverPlacement || 'top'; attrs.popoverAnimation = attrs.popoverAnimation || true; attrs.popoverPopupDelay = attrs.popoverPopupDelay || 0; attrs.popoverTrigger = attrs.popoverTrigger || 'mouseenter'; attrs.popoverAppendToBody = attrs.popoverAppendToBody || false; } } })
+1
source

Maybe you are using angular 1.3.1 which breaks popover, angular 1.3.0 works

0
source

Source: https://habr.com/ru/post/1206226/

More articles:


All Articles