У меня есть две директивы, одна из которых содержится в представлении, другая - к контейнеру вида.
<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?
Разве это не так угловато, чтобы интерпретировать эти взаимодействия? Может кто-то указать мне на ресурс, чтобы лучше понять, что я пытаюсь выполнить.
Любое просвещение было бы весьма признательным.
Это называется 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
.