如何让uib-popover在输入框焦点改变时打开或关闭

Question

我有一个输入字段，上面有 uib-popover 控件。我已按照有关如何打开指令的文档进行操作，但我注意到文档中存在一些差异以及此处有关 plnker 和 SO 问题的示例。

在我的 hmtl 中，我将输入设置如下：

<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <label>Password</label><input type="{{user.inputType}}" ng-blur="user.validatePassword(user.newUser.password, user.newUser.confirmPassword)" placeholder="Enter Password" id="password" required class="form-control" ng-model="user.newUser.password" uib-popover-template="'myPopoverTemplate.html'"  uib-popover-trigger="'focus'"/>
                        </div>
                        <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <label>Confirm Password</label>
                            <input type="{{user.inputType}}" ng-keyup="user.validatePassword(user.newUser.password, user.newUser.confirmPassword)" placeholder="Confirm Password" id="confirmPassword" required class="form-control" ng-model="user.newUser.confirmPassword"/>
                            <span style="color: red">{{user.message}}</span>
                        </div>

大多数示例以及此处的 SO 问题都使用较旧的库，因为属性没有以 uib-* 开头。

此 code/directive 当前有效并呈现，但它仅在单击该字段然后单击同一字段以关闭弹出窗口时才起作用或出现。 focus 触发器和 oustsideClick 触发器我都试过了。除非在字段中单击，否则两者都具有不呈现或关闭弹出窗口的相同结果。

所用框架的版本是：

angularjs 1.5.8
ui-bootstrap 1.3.3

更改触发器以匹配之前的示例，使用 popover-trigger 与使用 uib-popover-trigger 禁用弹出窗口我有 created a working plunker 演示正在发生的事情。

关于我遗漏或需要更改的任何建议。

提前致谢

Answer 1

你的代码有问题，请修改如下：

app.js:

(function() {
    var app = angular.module('app', ['ui.bootstrap']);

    app.controller('main',[ '$scope', main]);
    function main($scope)
    {
      vm = this;

      vm.message = 'hello';

      vm.dynamicPopover = {
        content: 'Hello, World!',
        templateUrl: 'myPopoverTemplate.html',
        title: 'Title'
      };
    }

}());

index.html

<input class="form-control" uib-popover-template="vm.dynamicPopover.templateUrl"  popover-trigger="focus"/>

实际上，你不能只将模板的id传递给uib-popover-template属性，你需要创建一个对象来映射它等待传递。

Answer 2

根据tooltip.js描述，为了设置一个自定义触发器，它需要通过传递给 $tooltipProvider.options 方法的 trigger 选项来指定。对于 focus 触发器，它将是：

app.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
    $uibTooltipProvider.options({ trigger: 'focus' });
  }]);

已更新 plunker，显示如何在 focus 处理程序上触发工具提示。

如何让uib-popover在输入框焦点改变时打开或关闭

How to get the uib-popover to open or close when the focus of the input field changes

angularjs

angular-ui-bootstrap