I am trying to build a directive to make angular UI $uibModal draggable. And also I want to close all of opened drop down list of ui-select in the modal body, when the modal is dragging.
Does anyone know how to close all of ui-select
list in a $uibModal
?
jsbin https://jsbin.com/lopitopiwa/edit?html,js,output
angular.module('myApp').directive('uibModalDragging',[
UibModalDragging
]);
function UibModalDragging() {
return {
restrict: 'A',
scope: false,
link: function (scope, iElem, iAttrs) {
$(iElem).closest('.modal-content').draggable({
handler: '.panel-heading',
start: onStart
})
}
};
function onStart() {
//*********************************************
//close all ui-select ???
}
}
This is better approach but you will need to create another directive according to this:
https://github.com/angular-ui/ui-select/wiki/Accessing-$select
angular.module('myApp').directive('myUiSelect', function() {
return {
require: 'uiSelect',
link: function(scope, element, attrs, $select) {
scope.$on('closeAll', (ev,val)=>{
$select.close();
});
}
};
});
and then add it to your elements:
<ui-select my-ui-select ng-model="selected.value">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in myModalCtrl.itemArray">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
after that just broadcast event to close everything example here: