gpt4 book ai didi

javascript - 添加弹出框到带有按钮的输入框(angularJS)

转载 作者:行者123 更新时间:2023-11-28 00:01:20 24 4
gpt4 key购买 nike

我的目标是有一个按钮,单击后将在输入框中显示弹出窗口“Hello World”

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

有哪些方法可以通过按钮触发输入上的弹出窗口?我尝试在按钮上添加弹出框触发器,但不确定应该在其中使用什么值

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>

最佳答案

下面是您的代码片段中的一些添加内容,当您单击按钮时,这些内容将触发弹出窗口,但这里应该注意一些事项:

  • DOM 操作不应该在 Controller 中发生,我这样做只是为了让当前代码执行其最初的意图
  • 对于要从按钮获取指令的输入按钮,我建议在输入标签周围创建一个新指令,该指令将监听 Angular 事件,当它听到它时,它将显示弹出窗口,该事件可以由按钮本身生成,有关它们的信息请参阅 here
  • 在应用中使用窗口、文档或其他默认 JS 全局变量不是一个好主意,尽可能尝试使用它们的 Angular 对应变量
  • 我使用超时来避免摘要循环错误,如果您使用我谈到的指令方法,则不会发生这种情况

希望这有帮助。

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>

关于javascript - 添加弹出框到带有按钮的输入框(angularJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31775803/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com