Question

我无法弄清楚如何做一些我在jQuery中非常直接发现的事情。我经常制作一些元素，当点击某些内容时，它会打开一个菜单，然后在元素外部点击时，菜单会关闭。

在jQuery中，很容易做到这样的事情（在元素点击中使用event.stopPropogatation()：

$('html').click(function () {
    $('#someElement').hide();
});

我正在制作如下的组合框指令：

directive('combobox', function () {
    return {
        restrict: 'E',
        templateUrl: '/angular/directives/combobox.php',
        scope: {
            'data': '=data',
            'search': '=results'
        },
        link: function postLink(scope, element, attrs) {
            scope.showDropdown = false;
            $combobox = element.children('.combobox');
            $combobox.children('.results').css({ 'top': $combobox.outerHeight(), 'width': $combobox.outerWidth() });
            $combobox.children('.dropdown').css('height', $combobox.outerHeight());

            scope.toggleDropdown = function ($event) {
                $event.stopPropagation();
                scope.showDropdown = scope.showDropdown?false:true;
            }
            $('html').click(function () {
                scope.showDropdown = false;
            });

            scope.setBox = function (set) {
                scope.search = set;
            }
        }
    }
})

我试图在HTML点击功能中控制范围的值，并显示范围值，但是当我尝试更改它们时，它们保持不变。我不确定我做错了什么，或者是否有更好的解决方案。

Answer 1

您可以在控制器中添加$scope.showDropdown变量，然后在指令中添加$watch变量。

Angular：单击out元素时切换变量

1 个答案: