Javascript AngularJS与父指令和子指令绑定的适当事件

我试图实现弹出窗口和按钮，显示它。 我是通过指令来做到这一点的：

<div class="wrapper" wrapper>
  <div class="popup" ng-class="{'popup__active':isActive}">
    Popup message
  </div>
  <button btn>Click me</button>
</div>

此代码有问题。 当我单击按钮时，它会显示弹出窗口，并在

包装器

链接函数中触发“click”事件时立即将其隐藏。 但那个点击事件应该只有在弹出窗口显示并且我点击了它之外的任何地方后才会触发

见plunk：

---

注：不幸的是，由于复杂的CSS依赖关系，在实际项目中无法更改布局。因此，我正在研究如何使用angular正确绑定元素。

根据当前的结构，父元素和子元素都有

单击事件。当您单击任何一个内部元素时，它将调用该元素的单击事件，然后它会弹出事件，因为父元素具有相同的事件。要防止这种行为，必须使用
event.stopPropagation（）
，这将防止单击事件时冒泡（将事件发送到其父元素）

指令

app.directive('btn', function($rootScope) {
  return {
    link: function($scope, $element) {
      $element.bind('click', function(e) {
        e.stopPropagation(); //stop bubbling up of event
        $rootScope.$broadcast('btnclick');
      });
    },
  }
});

谢谢。这正是我想要的。很高兴能帮助你……谢谢：）
app.directive('btn', function($rootScope) {
  return {
    link: function($scope, $element) {
      $element.bind('click', function(e) {
        e.stopPropagation(); //stop bubbling up of event
        $rootScope.$broadcast('btnclick');
      });
    },
  }
});