Question

我的目标是点击一个按钮，在输入框上显示一个弹出“Hello World”

目前，当点击输入框本身时，弹出窗口将显示，但不会通过按钮显示。请检查我的小提琴

有哪些方法可以通过按钮触发输入上的弹出窗口？我尝试在按钮上添加一个popover-trigger，但不确定我应该在其中使用什么值

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>

Answer 1

以下是您的代码段的一些补充，当您点击按钮时会触发弹出窗口，但是应该注意以下几点：

DOM操作永远不会发生在控制器中，我只是为了使当前代码完成原本打算做的事情而
对于要从按钮获取指令的输入按钮，我建议在输入标签周围创建一个新指令，该指令将监听角度事件，当它听到它时，它会显示弹出，事件可以由按钮本身生成，有关它们的信息，请参阅here
在您的应用中使用窗口，文档或其他默认JS全局变量不是一个好主意，尽量使用它们的角度对应物
我使用超时来避免摘要周期错误，如果您使用我所谈到的指令方法，则不会发生错误

希望这有帮助。

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>

使用按钮（angularJS）将弹出窗口添加到输入框

1 个答案: