Написать пользовательскую функцию для навигации angularjs

Question

Итак, у меня есть навигация, в которой я хочу иметь выпадающее меню с функцией подменю. Я попробовал ng-show для показа и скрытия меню, но тогда мне пришлось бы вернуться и снова щелкнуть элемент, чтобы скрыть его. Я хочу иметь возможность щелкнуть, чтобы показать, а затем щелкнуть в любом другом месте, чтобы скрыть его.

пытаясь использовать ng-click, но не уверен, куда я должен поместить свою пользовательскую функцию, которую я хочу получить, независимо от используемого контроллера.

Я бы положил что-то подобное в директиву? Функция не вызывает html или не получает какой-либо контент, для которого обычно предназначена фабрика, она просто показывает и скрывает контент в различных событиях щелчка.

Answer 1

Вероятно, есть более сложные способы сделать это, которые могут быть более элегантными, но я нашел, что это помогло в прошлом. Предполагается, что вы загружаете JQuery до Angular так $ полон jQuery. Если вы обнаружите, что делаете это со многими различными элементами DOM, возможно, было бы более эффективно разбить это на фабрику, которая позволяет многим объектам регистрировать себя таким образом с помощью всего одной привязки к body,

app.directive('clickOffHide',function() {
    return {
        ...
        link: function(.., elem, ..) {
            $('body').click(function(evt) {
                var $elem = $(elem);
                var $target = $(evt.target);
                if($elem.is($target) || $elem.has($target).length > 0) return;
                $elem.hide();
            });
        }
    }
});

Answer 2

Вы можете попробовать использовать ng-blur для выпадающего элемента.

<div ng-class="dropDown" ng-blur="functionToHideElement" tabindex="100">Products</div>

Элемент div может принять событие размытия, если у него есть указанный tabindex.

Таким образом, вы можете использовать запеченную в Angular директиву, а не создавать свою собственную.