angularjsangular-ui-bootstrapbootstrap-modalangular-ui-select

Close all of ui-select drop down list programmatically?


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 ???
    }
}

Solution

  • 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:

    https://jsbin.com/cadekafata/1/edit?html,js,console,output