Есть две директивы, первая меню а вторая всплывающее окно, по клику на первую:
<navigation show =' modalShown'></navigation>
<menu-setting show = 'modalShown'></menu-setting>
app.directive('navigation', function(){
return {
restrict: 'E',
scope: {
show: '=',
},
replace: true,
transclude: true,
link: function (scope) {
scope.toggleModal = function(index) {
scope.show = true;
};
},
template:
'<div class="exp">'+
'<div ng-repeat="test in model">'+
'<div class="title" ng-click="toggleModal()">'+
'</div>'+
'</div>'+
'</div>'
};
});
app.directive('menuSetting', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true,
transclude: true,
link: function(scope, element, attrs) {
scope.hideModal = function() {
scope.show = false;
};
},
template:
'<div>'+
'<div class="nmodal" ng-show="show" ng-repeat="test in model">'+
'<div class="modal-overlay" ng-click="hideModal()"></div>'+
'<div class="modal-dialog">'+
'<div class="ng-modal-dialog-content" ng-transclude>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'
};
});
Проблема в том, из-за того, что пункты меню и вплывающие окна, создаются через ng-repeat и при клике на любой из пунктов, вызываются все всплывающие окна, а нужно, чтобы по значению индекса меню, всплывало окно с соответствующим значением индекса.
Каким образом можно это сделать, не прибегая к объединению директив в одну?