Javascript 避免通过指令中的事件传播进行自切换

我有一个工具提示指令，它应该在单击时打开/关闭，另外在任意单击时关闭。由于

angular translate

不允许更改元素本身的内容，因此我将附加指令的元素

该指令看起来有点像这样（请注意，这是一个简化版本）：

{
限制：“A”，
作用域：{}，
编译：函数（元素）
{
元素。在（'
');
},
链接：功能（范围、元素）
{
angular.element（element.sillides（'toggle'））。单击（function（）
{
作用域$apply（函数（）
{
scope.active=！scope.active；
}
});
元素（文档）。单击（函数（）
{
作用域$apply（函数（）
{
scope.active=false；
}
});
} 
}

问题是，元素上的单击事件被触发（

scope.active=true

），然后传播到文档中，而文档会立即关闭

但是，如果我停止传播，它在大多数情况下都可以正常工作，唯一的情况是当我的页面上有多个指令实例并一个接一个地单击时，它就不能正常工作（第一个打开的应关闭，另一个应打开，但由于传播停止，

文档。单击另一个实例的事件不会触发

编辑：演示该问题。如果单击绿色框并再次单击它，它会工作；如果单击绿色框，然后单击背景，它会工作；如果单击绿色框，然后单击另一个绿色框，尽管第一个绿色框应该关闭，但两者都打开。

如果删除
第20行
上的
事件.stopPropagation（）
，则提示根本不会显示，因为首先触发了对框的单击，会显示提示，但在进一步的事件传播之后，也会触发对背景的单击，并立即再次将其关闭


如果我的问题有一个更好的解决方案，我也会很感激这是一个能帮助你的解决方案

现场示范


angular.module（'app'，[]）
.controller（'testCtrl'，['$scope'，
职能（$范围）{
var self=这个；
}
])
.directive（'hintDirective'，['$compile'，
函数（$compile）{
var directiveHint=[]；
返回{
限制：“A”，
是的，
作用域：{}，
模板：“提示消息”，
链接：功能（范围、元素）{
scope.active=false；
directiveHint.push（范围）；
var span=element.find（'span'）[1]；
scope.toggle=函数（$ev）{
scope.active=！scope.active；
其他（范围）；
$ev.stopPropagation（）；
}
功能关闭其他（范围）{
angular.forEach（directiveHint，函数（sc）{
如果（sc！=范围）{
关闭活动（sc）
}
});
}
函数closeAll（）{
angular.forEach（directiveHint，函数（sc）{
关闭活动（sc）
});
}
功能关闭激活（sc）{
如果（sc.active）
sc.active=false；
}
功能文档单击（事件）{
作用域$apply（函数（）{
closeAll（）；
});
}
var$body=angular.element（document.body）；
if（！$body.hasClass（'hint-directive-click'））{
角度.element（document）.bind（'click'，documentClick）；
$body.addClass（'hint-directive-click'）；
}
作用域.$on（“$destroy”，函数（）{
angular.forEach（方向提示，函数（sc，i）{
if（sc==范围）
直接提示：拼接（i）；
});
})
}
}
}
])；
html，
身体{
宽度：100%；
身高：100%；
}
.分开{
浮动：左；
宽度：50%；
身高：100%；
}
.切换{
显示：内联块；
宽度：1米；
高度：1米；
背景颜色：绿色；
}
p{
浮动：左；
}
.留言{
背景颜色：灰色；
宽度：200px；
}












文本1












文本2

启用文本3

文本3

您能给出一个重现问题的JSFIDLE示例吗？当然，请检查更新后的问题
{
    restrict: 'A',
    scope: {},
    compile: function(element)
    {
        element.after('<div class="toggle"></div>
            <div class="message" ng-show="active"></div>');
    },
    link: function(scope, element)
    {
        angular.element(element.siblings('toggle')).click(function()
        {
            scope.$apply(function()
            {
                scope.active = !scope.active;
            }
        });
        angular.element(document).click(function()
        {
            scope.$apply(function()
            {
                scope.active = false;
            }
        });
    } 
}