以编程方式关闭所有 ui-select 下拉列表？答案

【问题标题】：Close all of ui-select drop down list programmatically?以编程方式关闭所有 ui-select 下拉列表？
【发布时间】：2018-03-02 03:21:17
【问题描述】：

我正在尝试构建一个指令以使角度 UI $uibModal 可拖动。当模态被拖动时，我还想关闭模态体中所有打开的 ui-select 下拉列表。

有人知道如何关闭$uibModal 中的所有ui-select 列表吗？

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

【问题讨论】：

标签： angularjs angular-ui-bootstrap bootstrap-modal angular-ui-select

【解决方案1】：

这是更好的方法，但您需要根据此创建另一个指令：

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();
      });
    }
  };
});

然后将其添加到您的元素中：

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

之后只是广播事件以关闭此处的所有示例：

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

【讨论】：