Question

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

<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标签时，会触发tab content指令，然后紧接着执行close-content指令。

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

这不是角度设计用于解释这些相互作用吗？有人能指出我的资源，以便更好地理解我正在努力实现的目标。

任何启蒙都会受到高度赞赏。

Answer 1

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

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

要停止传播，请在传递给处理程序的stopPropagation()对象上使用event方法：

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

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

角度嵌套多点击指令

1 个答案: