javascript - Angular 嵌套多次单击指令

Question

我有两个指令，一个包含在 View 中，另一个应用于 View 的容器。

<div id="content" data-panel='{{ pNav }}' close-content>
    <div class="inner reveal-animation" ng-view>

    </div>
</div>

在 ng-view 中加载标记:

<div class="inner-content services">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2 general-content">
            <h1>Our Services</h1>
            <ul class="tab-nav">
                <li><a href="" class="cx" tab-content><span>AB</span> Customer Service</a></li>
                <li><a href="" class="bx" tab-content><span>CD</span> Existing Applciations</a></li>
            </ul>
            <div class="tab-content">

            </div>
        </div>
    </div>
</div>

应用指令:

  myApp.directive('closeContent',['PanelServ', function(PanelServ){

  return function(scope, element, attrs){

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

  };

}]);

myApp.directive('tabContent',['PanelServ', function(PanelServ){

    return function(scope, element, attrs){
        element.on('click', function () {
            console.log(element);
        });
    };
}]);

当单击带有 tab-content 指令的 anchor 标记时，选项卡内容指令会触发，并立即执行 close-content 指令。

是否应该在 tab-content 指令中包含一些内容，以防止在执行 tab-content 指令时触发 close-content 指令？

这不就是 Angular 被设计用来解释这些交互的方式吗？有人可以向我指出一些资源，以便更好地了解我想要完成的任务吗？

任何启发将不胜感激。

Answer 1

这称为事件冒泡。 HTML 元素上触发的事件首先在元素本身上处理，然后传播到 DOM 树上的父元素 - 从而触发父元素的事件处理程序。

AngularJS 与此无关，这就是 Javascript 事件的工作方式。

要在您的情况下停止传播，请在传递到处理程序的 event 对象上使用 stopPropagation() 方法:

myApp.directive('tabContent',['PanelServ', function(PanelServ){
    return function(scope, element, attrs){
        element.on('click', function (event) {
            event.stopPropagation();
            console.log(element);
        });
    };
}]);

这将阻止执行 closeContent 指令的点击处理程序。