Угловые Вложенные Директивы Многократного Щелчка

Question

Угловые Вложенные Директивы Многократного Щелчка

0

У меня есть две директивы, одна из которых содержится в представлении, другая - к контейнеру вида.

<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 запускается директива содержимого вкладки, и сразу же выполняется выполнение директивы close-content.

Есть ли что-то, что я должен включить в директиву tab-content, чтобы предотвратить запуск директивы close-content, когда выполняется директива tab-content?

Разве это не так угловато, чтобы интерпретировать эти взаимодействия? Может кто-то указать мне на ресурс, чтобы лучше понять, что я пытаюсь выполнить.

Любое просвещение было бы весьма признательным.

user2355051 31 май 2016, в 17:05

Источник

Теги:

javascript

jquery

html

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Alec Kravets · Answer 1 · 2016-05-31T14-03-00.000Z

Это называется 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.