Javascript 显示提示div的angular指令

我正在尝试创建一些DIV，每个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>

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之外按下时，使所有提示消失，但是当我打开一个提示并按下另一个提示时，它会同时打开这两个提示，当我打开其中一个提示时，我不知道如何使其他提示消失。我也知道这不是“角度的方式”，如果有更好的方式，我很乐意看到

---

我希望任何人都能帮忙，提前谢谢你，丹尼尔

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

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

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

---

演示：

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

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

解决方案：

---

是的，我已经补充了这一点，但问题是当我打开一个提示时，另一个提示仍然保持打开状态，它应该会消失，只有一个提示应该在1点打开这是实现我的目标的好方法，非常感谢Arun P Johny！

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