Adding a popover to an input box with a button (angularJS)

Question

My goal is to have a button that on click will show a popover "Hello World" on the input box

Currently when clicking on input box itself, the popover will show, but not through the button. Please check my fiddle

What are some ways to trigger a popover over the input with a button ? I tried adding a popover-trigger on the button, but was not sure what value I should use inside it

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">

    <p>
      <button class="btn btn-default">Mouseenter</button>
    </p>
    <input type="text" value="Click me!" popover="hello world" class="form-control">

</div>
  </body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 12:30

Below are some additions to your snippet which will trigger the pop over when you click the button, but a few things here should be noted:

DOM manipulations should never happen in the controller, I merely did it to make the current code do what it was originally intended to do
For the input button to be taking instructions from a button, I would recommend crating a new directive around the input tag which will be listening for an angular event and when it hears it, it will show the pop up, the event can be generated by the button itself, for information on them see here
It is not a good idea to use window, document or other default JS global variables in your app, try to use their angular counterparts whenever possible
I used timeout to avoid a digest cycle error, which will not happen if you're using the directive method I talked about

Hope this helps.

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $timeout) {

$scope.activateInput = function () {
  var elm = document.getElementsByTagName("input")[0];
  $timeout(function () {
      angular.element(elm).triggerHandler('click');
  });
}
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">

    <p>
      <button class="btn btn-default" ng-click="activateInput()">Mouseenter</button>
    </p>
    <input type="text" value="Click me!" popover="hello world" class="form-control">

</div>
  </body>
</html>

Adding a popover to an input box with a button (angularJS)

1 Answers1