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 ...

Answer 1

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">