2

2 つのディレクティブがあります。一方のディレクティブはドロップダウンを表示し、もう一方のディレクティブは、ページの別の場所がクリックされたときにドロップダウンを非表示にする必要があります。

ドロップダウン ディレクティブ:

app.directive('dropdown', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.ngShow, function (newVal, oldVal) {

                obj = angular.element(document.getElementById(attrs.dropdown));
                if (newVal) {

                    // hide all drodowns with this attribute                    $(document).find('[dropdown]').each(function (index) {
                    if ($(this).is(':visible')) {
                        var attrValue = $(this).attr('ng-show');
                        var model = $parse(attrValue);

                        model.assign(scope, false);
                    }
                });
            var offset = obj.offset();
            var new_top = offset.top + 30;
            var right = offset.left + obj.outerWidth() - element.width() + 10;

            element.css('left', right + 'px');
            element.css('top', new_top + 'px'); angular.element(element.children()[0]).css('margin-left', element.width() - 30 + 'px');
            element.show('size', {
                origin: ["top", "right"]
            }, 100);
            }
        });
}
}
});

ドロップダウン ディレクティブを非表示:

app.directive('hideAllPopups', function ($parse) {
    return {
        link: function (scope, element, attrs) {
            $(document).mouseup(function (e) {

                $(document).find('[dropdown]').each(function (index) {

                    if ($(this).is(':visible')) {
                        var attrValue = $(this).attr('ng-show');
                        var model = $parse(attrValue);

                        model.assign(scope, false);
                    }
                });
            });
        }
    };
});

後者のディレクティブは機能していません。私が達成したいのは、ドロップダウンの外にクリックイベントがある場合、ドロップダウンを非表示にする必要があるということです。

ドロップダウンの表示はこのコードで機能しますが、ドロップダウンが非表示になることはなく、理由がわかりません。では、「すべてのドロップダウンを非表示」を機能させるにはどうすればよいですか?

フィドル

4

1 に答える 1

5

コールバックは、Angularの$(document).mouseup「外部」で実行されるイベント ハンドラーであるため、Angular はモデルの変更を認識しません。追加するだけで機能scope.$apply()します：

link: function (scope, element, attrs) {
    $(document).mouseup(function (e) {
        $(document).find('[dropdown]').each(function (index) {
            if ($(this).is(':visible')) {
                var attrValue = $(this).attr('ng-show');
                var model = $parse(attrValue);
                model.assign(scope, false);
                scope.$apply();  // <<-----------------
            }
        });
    });
}
于 2013-06-15T03:41:44.693 に答える