javascript - 使用 ng-options 时如何绑定 mouseover 和 mouseleave 事件

Question

我想使用指令绑定到以下选择元素中选项元素的 mouseover 和 mouseleave 事件：

<select class="form-control" jr-option-bind="" ng-model="vm.selectedPersonalInfo" ng-options="personalInfo as personalInfo.name for personalInfo in vm.personalInfos"></select>

这行不通。jr-option-bind 是我的指令：

function link(scope, element, attrs) {

        var options = element.children();
        options.bind('mouseover', function(){
           console.log('mouseover');
        });
        options.bind('mouseleave', function(){
            console.log('mouseleave');
        });
    }

Answer 1

这应该有效：

function link(scope, element, attrs) {

        var options = element.children();
        $(element).on('mouseover', 'option', function(){
           console.log('mouseover');
        });
        $(element).on('mouseleave', 'option', function(){
            console.log('mouseleave');
        });
    }

Answer 2

您还可以像这样分解选择元素：

<select class="form-control" jr-option-bind="" ng-model="vm.selectedPersonalInfo">
    <option ng-repeat="personalInfo as personalInfo.name for personalInfo in vm.personalInfos">
        {{personInfo.name}}
    </option>
</select>

然后在选项元素上添加 ng-mouseover 或 ng-mouseleave

<option ng-mouseleave="myFunction()">

Answer 3

我从研究中了解到的是，IE 和 Chrome 不允许将鼠标悬停或鼠标插入下拉菜单中的选项元素。我决定使用单选按钮。