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

Question

我的目标是要有一个按钮，单击该按钮后，输入框上将显示一个弹出式窗口“ Hello World”

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

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

 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操作永远都不会在控制器中发生，我只是这样做是为了使当前代码执行原本打算执行的操作
为了使输入按钮能够从按钮中获取指令，我建议在输入标签周围创建一个新指令，该指令将监听一个角度事件，当它听到该事件时，它将显示弹出窗口，该事件可以通过以下方式生成按钮本身，有关其信息，请参见此处
在您的应用程序中使用窗口，文档或其他默认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 个解决方案

解决方案1
1 已采纳 2015-08-02 21:18:17

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-02 21:18:17

解决方案1
1 已采纳 2015-08-02 21:18:17