css - angularjs 中的 Twitter-Bootstrap 下拉列表打开/关闭事件

Question

我正在尝试创建一个下拉列表指令，当鼠标悬停在下拉标题上或下拉列表被取消时，向下箭头会出现，否则会消失。

我成功做到了这一点，但如果不是通过选择元素或再次按下标题列表来关闭下拉列表，则箭头不会消失。

(即，如果我打开一个列表而不是打开另一个列表而不关闭第一个列表，那么第一个列表的箭头不会消失)

---

JsFiddle - http://jsfiddle.net/rpg2kill/uS4Bs/

代码:

var myApp = angular.module('myApp', ['ui.bootstrap']);

function MyCtrl($scope) {
    $scope.supportedList= ['Option1', 'Option2', 'Option3', 'Option4'];
    $scope.selectedItem = 'Option1';
}

myApp.directive('dropDown',

function () {
    return {
            restrict: 'E',
            replace: false,
            scope: {
                supportedList:'=',
                selectedItem:'='
            },
            template:
'<div ng-mouseenter="onMouseEntered()" ng-mouseleave="onMouseLeft()">' + 
    '<a class="dropdown-toggle" data-toggle="dropdown" href="" ng-click="onMouseClicked()" >' +
        '<img ng-style="{\'visibility\': dropDownIconVisibility}"  src="http://png.findicons.com/files/icons/2222/gloss_basic/16/arrow_down.png">  </img>' + //Arrow down Icon
        '<span>{{selectedItem}}</span>' +
    '</a>' +
    '<ul class="dropdown-menu">' +
        '<li ng-repeat="item in supportedList" ng-click="onSelectedItem(item)">' +
            '{{item}}' +
        '</li>' +
    '</ul>' +
'</div>'
        ,
            link: function(scope, element, attrs) {
                scope.dropDownIconVisibility = "hidden";
                scope.dropDownIconVisibilityLocked = false;

                scope.onSelectedItem = function(item) {
                    scope.dropDownIconVisibilityLocked = false;
                    scope.selectedItem = item ;
                };

                scope.onMouseEntered = function()
                {
                    scope.dropDownIconVisibility = "visible";
                };

                scope.onMouseLeft = function()
                {
                    if (scope.dropDownIconVisibilityLocked)
                        return;
                    scope.dropDownIconVisibility = "hidden";
                };

                scope.onMouseClicked = function()
                {
                    scope.dropDownIconVisibility = "visible";
                    scope.dropDownIconVisibilityLocked = !scope.dropDownIconVisibilityLocked;
                };

            }            
    };
})

代码有点难看。更好的解决方案是在鼠标悬停时显示箭头或列表已打开，但我不知道如何将 Angular 绑定(bind)到下拉列表的状态。

有没有办法将 angular 绑定(bind)到 Twitter Bootstrap 的下拉事件？或者有没有更好的方法来解决这个问题？

Answer 1

我建议您使用完整的 CSS 方法 - 它需要更少的代码，它不会触发 JS 评估，因此它的性能更好(Angular 的所有很酷的功能都有点慢)。一旦移动 - CSS 将更可取，因为它支持使用媒体查询等进行降级......优点太多了!

删除所有鼠标跟踪代码并仅添加两个 CSS 规则和 here you go :

a.dropdown-toggle img {
    visibility: hidden;
}
a.dropdown-toggle:hover img {
    visibility: visible;
}