Question

所以我有一个导航，我想要一个带有子菜单功能的dropdrown菜单。我尝试使用ng-show来显示和隐藏菜单但是我必须返回并再次单击项目以隐藏它。我希望能够点击显示，然后点击其他地方隐藏它。

尝试使用ng-click但不确定在哪里放置我想要检索的自定义函数，无论使用何种控制器。

我会在指令中加入这样的东西吗？该功能不是调用html或获取像工厂一样的任何内容，它只是显示和隐藏不同点击事件的内容。

Answer 1

可能有更复杂的方法可能会更优雅，但我已经发现这可以在过去做到这一点。假设您在Angular之前加载jQuery，因此$是完整的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指令中使用烘焙，而不是创建自己的。

为导航angularjs编写自定义函数

2 个答案: