AngularJS中uib-typeahead场景下ng-blur触发异常问题咨询

这个问题我之前也碰到过，确实是uib-typeahead的一个常见坑——当用鼠标点击下拉建议选项时，输入框会先触发ng-blur事件，然后才完成选项选择，导致你的预期逻辑被打乱。这里有个靠谱的解决办法，通过添加状态标记来区分「用户主动离开输入框」和「点击typeahead选项导致的blur」：

步骤1：在控制器中添加状态变量 #

首先在你的控制器里定义一个布尔变量，用来标记是否正在选择typeahead的选项：

// 假设你的控制器结构如下
angular.module('yourApp').controller('YourController', function() {
    var vm = this;
    vm.skills = ['JavaScript', 'AngularJS', 'HTML', 'CSS'];
    vm.skill1 = '';
    // 添加状态标记，区分是否正在选择typeahead选项
    vm.isSelectingSkill = false;

    // 修改原有的checkSkills函数，加入状态判断逻辑
    vm.checkSkills = function(skill) {
        // 如果是选择typeahead选项触发的blur，直接跳过业务逻辑
        if (vm.isSelectingSkill) {
            vm.isSelectingSkill = false; // 重置状态
            return;
        }
        // 这里写你原本要执行的checkSkills业务逻辑
        console.log('执行blur逻辑，当前技能：', skill);
    };

    // 添加处理typeahead选中事件的函数
    vm.onSkillSelected = function() {
        vm.isSelectingSkill = true;
    };
});

步骤2：修改HTML模板 #

给uib-typeahead添加uib-typeahead-on-select指令，绑定上面的选中处理函数，同时保留原有的ng-blur：

<div class="form-group">
    <label for="Skill1">Skill</label>
    <input type="text" 
           ng-model="vm.skill1" 
           name="skill1" 
           uib-typeahead="skill for skill in vm.skills | filter:$viewValue"
           uib-typeahead-on-select="vm.onSkillSelected()"
           class="form-control typeahead" 
           ng-blur="vm.checkSkills(vm.skill1)" 
           placeholder="" 
           required>
</div>

原理说明 #

当用户用鼠标点击typeahead的下拉选项时，会先触发uib-typeahead-on-select事件，我们把isSelectingSkill设为true；紧接着输入框的ng-blur事件触发，此时checkSkills函数会检测到这个状态，直接返回不执行业务逻辑，之后再重置状态。而当用户真正主动离开输入框（比如点击页面空白处、切换到其他输入框）时，uib-typeahead-on-select不会触发，isSelectingSkill保持false，你的checkSkills逻辑就会正常执行。

这个方案简单有效，不会破坏原有组件的功能，完美解决了冲突问题。

内容的提问来源于stack exchange，提问作者H. Gorodesky