I am currently working on an angularjs directive that creates a multi-select dropdown with a complex template. The directives have isolated scopes and there is a variable called open in the dropdown that toggles its visibility based on clicks. Currently, the dropdown only closes when the DOM is clicked. However, if a user clicks on two dropdowns consecutively, both remain open. To close the sibling dropdown, I need to access its scope and set the value for open. How can I access the isolated scope of a sibling originating from the same directive?
var directiveModule = angular.module('angular-drp-multiselect', []);
directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$compile', '$parse',
function ($filter, $document, $compile, $parse) {
return {
restrict: 'AE',
scope: {
selectedModel: '=',
options: '=',
extraSettings: '=',
events: '=',
searchFilter: '=?',
translationTexts: '=',
groupBy: '@'
},
template: function (element, attrs) {
var checkboxes = attrs.checkboxes ? true : false;
var groups = attrs.groupBy ? true : false;
var template = '<div class="multiselect-parent btn-group dropdown-multiselect btn-block ">';
template += '<button type="button" ng-disabled="getDisableStatus()" class="dropdown-toggle btn-block btn-leftAlign" ng-class="settings.buttonClasses" ng-click="HideAllOpenDropDowns();toggleDropdown($event)" ng-attr-title="{{getButtonTitle()}}">{{getButtonText()}} <span class="caret"></span></button>';
template += '<ul class="dropdown-menu dropdown-menu-form" ng-data="{{open}}" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: scroll" >';
template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a data-ng-click="selectAll()"> {{texts.checkAll}}</a>';
.....
element.html(template);
},
link: function ($scope, $element, $attrs) {
var $dropdownTrigger = $element.children()[0];
$scope.toggleDropdown = function () {
//here I need to access all siblings(generated from the same directive) scope , to control the visibility, by setting value for $scope.open
//I tried the following things
--------------------------------------
//Attempt 1- not working
angular.forEach(angular.element($element.parent().parent().children()), function (value, key) {
var x = angular.element(value).scope();
x.open = false;
//x.$apply(function () {
// x.open = false;
//});
}
//Attempt 2- not working
angular.forEach(angular.element($(".multiselect-parent")), function (value, key) {
var menuElem = angular.element(value);
var menuElemScope = menuElem.scope();
menuElemScope.$apply(function () {
menuElemScope.open = false;
});
});
--------------------------------------
$scope.open = !$scope.open;
};
...
...
The HTML structure is as follows:
<div ng-app="multiSelectApp">
<div ng-controller="MultiSelect">
<div ng-dropdown-multiselect=""
extra-settings="DropDownSettings1" >
</div>
<div ng-dropdown-multiselect=""
extra-settings="DropDownSettings2" >
</div>
<div ng-dropdown-multiselect=""
extra-settings="DropDownSettings3" >
</div>
</div>
</div>