当输入字段的焦点发生变化时如何让uib-popover打开或关闭答案

【问题标题】：How to get the uib-popover to open or close when the focus of the input field changes当输入字段的焦点发生变化时如何让uib-popover打开或关闭
【发布时间】：2016-11-01 19:02:57
【问题描述】：

我有一个输入字段，上面有 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-* 开头。

此代码/指令当前有效并呈现，但仅在单击字段然后单击同一字段以关闭弹出框时才有效或出现。我已经尝试过focus 触发器和oustsideClick 触发器。除非在字段中单击，否则两者都具有相同的结果，即不呈现或关闭弹出框。

使用的框架版本是：

angularjs 1.5.8
ui-bootstrap 1.3.3

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

关于我缺少什么或我需要改变什么的任何建议。

提前致谢

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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 属性，你需要创建一个对象来映射它等待传递。

【讨论】：