4

我正在尝试创建一个下拉列表指令，当鼠标悬停在下拉标题或下拉列表处于打开状态时，会出现向下箭头，并以其他方式消失。

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

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

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;
                };

            }            
    };
})

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

有没有办法将角度绑定到 Twitter 引导程序的下拉事件？或者有没有更好的方法来解决这个问题？

4

3 回答 3

2

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

删除所有鼠标跟踪代码并添加两个 CSS 规则，然后就可以了：

a.dropdown-toggle img {
    visibility: hidden;
}
a.dropdown-toggle:hover img {
    visibility: visible;
}
于 2013-08-11T15:18:58.400 回答
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，我想知道。谢谢。

于 2013-08-12T14:27:56.977 回答
2

找到问题的 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/

于 2013-08-12T15:31:05.167 回答