Question

我正在尝试创建一些DIV，每个人都有一个DIV有关于该父DIV的提示，html布局如下所示：

<div show-hint>
    <h2>Title1</h2>
    <div class="hint">This is description 1</div>
</div>

<div show-hint>
    <h2>Title2</h2>
    <div class="hint">This is description 2</div>
</div>

<div show-hint>
    <h2>Title3</h2>
    <div class="hint">This is description 3</div>
</div>

现在我想要实现的是当我按下DIV中的一个时，带有提示的孩子DIV应该显示并且所有其他人都隐藏，当我按下任何DIV之外时，所有提示都应该消失。我创建了一个如下所示的指令：

myApp.directive('showHint', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.bind('click', function() {
                elem.toggleClass('showhint');
            });
            $(document).bind('click', function() {
                elem.removeClass('showhint');
            });
        }
    };
});

这个指令打开了我按下的提示，当我按下任何一个DIV时，让所有提示消失，但是当我打开一个提示并按下另一个提示时，它会打开它们两个，我不知道如何当我打开其中一个时，让其他提示消失。此外，我知道这不是'有角度的方式'，因为有一种更好的方法，我很乐意看到它。

我希望任何人都可以提前帮助，谢谢你！

Answer 1

看起来像是一个事件传播问题

app.directive('showHint', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.bind('click', function(e) {
                elem.toggleClass('showhint');
                e.stopPropagation();
            });
            $(document).bind('click', function() {
                elem.removeClass('showhint');
            });
        }
    };
});

演示：Fiddle

Answer 2

我提出了一个很好的解决方案：

文档上只有一个事件侦听器。
每个元素还有一个事件监听器。
和plunker

解决方案：

app.directive('showHint',  function() {

    var removeClass = function(){
      var divs = document.getElementsByClassName('showhint')
      angular.element(divs).removeClass('showhint');
    }

    angular.element(document).on('click', function(){
      removeClass();
    });

    return {
        restrict: 'A',
        link: function(scope, elem, attr) {

            elem.bind('click', function(event) {
                var hasClass = elem.hasClass('showhint');
                removeClass();
                if (!hasClass) elem.addClass('showhint');
                event.stopPropagation();
            });
        }
    };
});

Answer 3

elem.bind('click', function() {
    elem.addClass('showhint').siblings().removeClass('showhint'); 
       // remove the class from the other sibling divs
});

用于显示提示div的angular指令

3 个答案:

解决方案：