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开头 - *。

此代码/指令当前有效并呈现，但只有在单击字段然后单击相同字段才能关闭弹出窗口时才会起作用或显示。我已经尝试了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说明，为了设置自定义触发器，需要通过传递给class Form extends React.Component { constructor(props) { super(props); this.state = {text:{ e:'hi', c:'' }}; this.handleSubmit = this.handleSubmit.bind(this); } handleChange(property, event) { console.log(event.target.value); const text = {...this.state.text}; text[property] = event.target.value; this.setState({ text }); //or you can use the shorthand here. ES6 is awesome <3 } handleSubmit(event) { alert('Text field value is: ' + this.state.text.e); } render() { return ( <div> <div>{this.state.text.e}</div> <div>{this.state.text.c}</div> <input type="text" placeholder="Hello!" value={this.state.text.e} onChange={this.handleChange.bind(this, 'e')} /> <input type="text" placeholder="Hello!" value={this.state.text.c} onChange={this.handleChange.bind(this, 'c')} /> <button onClick={this.handleSubmit}> Submit </button> </div> ); } } ReactDOM.render( <Form />, document.getElementById('root') );方法的trigger选项指定它。在$tooltipProvider.options触发器的情况下，它将是：

focus

更新了plunker，其中显示了如何在app.config(['$uibTooltipProvider', function ($uibTooltipProvider) { $uibTooltipProvider.options({ trigger: 'focus' }); }]);处理程序上触发工具提示。

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

2 个答案: