使用按钮将弹出框添加到输入框（angularJS）
[英]Adding a popover to an input box with a button (angularJS)
问题描述
My goal is to have a button that on click will show a popover "Hello World" on the input box 
我的目标是要有一个按钮，单击该按钮后，输入框上将显示一个弹出式窗口“ Hello World”
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 我尝试在按钮上添加一个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>
1 个解决方案
解决方案1
1 已采纳 2015-08-02 21:18:17
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 DOM操作永远都不会在控制器中发生，我只是这样做是为了使当前代码执行原本打算执行的操作
- 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 在您的应用程序中使用窗口，文档或其他默认JS全局变量不是一个好主意，请尽可能使用它们的对角变量
- 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.