使用按鈕將彈出框添加到輸入框（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