How to trigger bootstrap popover by ng-show in angularjs

Question

I have the following working code:

<input 
    value="order.value"
    name="orderValue"
    ng-pattern="/^[0-9]{0,20}$/"
    handle-save="update()">
</input>
<div 
    class="text-primary 
    icon-exclamation-sign" 
    ng-show="form.value.$error.pattern">
    Only numbers are allowed
</div>

Is it possible to trigger a bootstrap popover instead of "Only numbers are allowed"? It seems like it will only be triggered by a mouse click or hover ...

Try with this question: Enable angular-ui tooltip on custom events. — Stewie
– Stewie, Commented Dec 17, 2013 at 20:52

Tony · Accepted Answer · 2013-12-17 22:00:41Z

3

For such interactions you can use a directive and in it scope.$watch to watch for changes of the 'shown' attribute and reflect them - call 'element.popover()'.

The directive will look something like this

directive('popover', function () {
  return {
    restrict: 'A',
    scope: {
      shown: '=',
    },
    link: function(scope, element) {
      scope.$watch('shown', function(shown) {
        if (shown) {
          element.popover('show');
        } else {
          element.popover('hide');
        }
      });
    }
  };
});

and you can use it like so <div popout shown="form.value.$error.pattern">

answered Dec 17, 2013 at 22:00

Tony

1,7851 gold badge11 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to trigger bootstrap popover by ng-show in angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related