javascript - 为 AngularJS 导航编写自定义函数

Question

所以我有一个导航，我想要一个带有子菜单功能的下拉菜单。我尝试使用 ng-show 来显示和隐藏菜单，但随后我必须返回并再次单击项目来隐藏它。我希望能够单击以显示它，然后单击其他任何位置以将其隐藏。

尝试使用 ng-click 但不确定应该将我想要检索的自定义函数放在哪里，无论使用什么 Controller 。

我可以在指令中添加这样的内容吗？该函数不会像工厂一般那样调用 html 或获取任何内容，它只是在不同的点击事件上显示和隐藏内容。

Answer 1

可能有更复杂的方法可以做到这一点，也可能更优雅，但我过​​去发现这样做可以解决问题。假设您在 Angular 之前加载 jQuery，因此 $ 是完整的 jQuery。如果您发现自己使用许多不同的 DOM 元素执行此操作，那么将其分解为一个工厂可能会更有效，该工厂允许许多对象以这种方式注册自己，只需与 body 进行一次绑定(bind).

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