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 绑定到 Twitter 引导程序的下拉事件？ 或者有没有更好的方法来解决这个问题？

Answer 1

找到问题的 CSS 解决方案。 css 是那么简单，而不是所有的 js 事件..

CSS：

a.dropdown-toggle img {
    visibility: hidden;
}
li.ng-scope:hover img,li.ng-scope:active img,.open a img{
    visibility: visible;
}

你可以查看这个：http://jsfiddle.net/rpg2kill/HVftB/1/

Answer 2

我成功地解决了这个问题，不幸的是这个解决方案不是那么漂亮，但至少它有效。 我将尝试按照 madhead 的建议仅使用 CSS 来解决这个问题。

问题是我不知道用户何时在下拉列表之外单击，导致下拉弹出窗口关闭但图标仍然显示。所以我为每个监听 document.click 事件并隐藏图标的指令附加了一个处理程序。

    document.addEventListener('click', function (event) {
        scope.$apply(function () {
            scope.hideDropdownIcon();
        });
    }, false);

这行得通，但是如果我在打开当前下拉菜单时单击另一个下拉菜单，则不会触发 document.click 事件。所以我必须创建我的事件并将其附加到 $window 并在任何下拉菜单打开时调用它。

var event = new Event('hideDropDownIcon');
$window.addEventListener('hideDropDownIcon', function (e) {
    scope.hideDropdownIcon();
}, false);

你可以在这里看到它： http://jsfiddle.net/rpg2kill/uS4Bs/6/

必须有更好的解决方案。因此，如果您知道如何做得更好或仅使用 css，我想知道。 谢谢。

Answer 3

我建议你使用完整的 CSS 方法 - 它需要更少的代码，它不会触发 JS 评估，因此它的性能更好（Angular 的所有酷特性有点慢）。一旦你使用移动设备 - CSS 将更可取，因为它支持使用媒体查询降级等等......专业人士太多了！

删除所有鼠标跟踪代码，只添加两条 CSS 规则和here you go：

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