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 回答