4

ドロップダウン リスト ディレクティブを作成しようとしています。マウスがドロップダウン ヘッダーの上に置かれているとき、またはドロップダウン リストが開いているときに下向き矢印が表示され、それ以外の場合は消えます。

私はこれを行うことに成功しましたが、要素を選択したり、ヘッダーリストを再度押したりしてドロップダウンリストを閉じた場合、矢印は消えません。

(IE 1 つのリストを開いて、最初のリストを閉じずに別のリストを開くよりも、最初のリストの矢印が消えていない場合)

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ブートストラップのドロップダウンイベントにバインドする方法はありますか? または、この問題を解決するためのより良い方法はありますか?

4

3 に答える 3

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 に答える