angular.js - angular.ui：dropdown的下拉菜单关闭的偶尔失常问题

Question

本人遇到一个很奇怪的问题，点击菜单中的选择项，大多数情况下菜单隐藏正常，小部分情况就出现了如上图情况。
（我检查过dropdown的is-open值，的确已经为false。）
不知道问题出在哪里，请高手指教,谢谢。

以下为我的部分代码

.directive('pxSearchInputGroup',function($ListCache,$filter,$timeout,$rootScope,$currentUser,$parse){
            return {
                restrict:'EA',
                scope:{
                    assortmentList:'=',
                    isOpen:'=',
                    inputPlaceholder:'@',
                    templateType:'@',
                    afterSelect:'&'

                },
                templateUrl:'../templates/widget/search-input-list.html',
                controller:function($scope,$attrs){
                    var self=this,assortmentList,teamAssortment,userAssortment,teamList,userList;
                    //var getIsOpen=$parse($attrs.isOpen);
                    //var setIsOpen=getIsOpen.assign||angular.noop;
                    this.init=function(){
                        assortmentList=angular.copy($scope.assortmentList);
                        teamAssortment= _.findWhere(assortmentList,{type:'team'});
                        userAssortment= _.findWhere(assortmentList,{type:'user'});

                        $scope.vm={
                            key:'',
                            isOpen:$scope.isOpen
                        };
                        $scope.currentUser=$currentUser.get();


                        $scope.$watch('vm.key',function(newKey,oldKey){

                            var condition={
                                $or:{
                                    nickName:{
                                        $likeI:newKey
                                    },
                                    email:{
                                        $likeI:newKey
                                    },
                                    mark:{
                                        $likeI:newKey
                                    },
                                    name:{
                                        $likeI:newKey
                                    }
                                }
                            };

                            if(newKey!==oldKey){
                                if(newKey===''||!newKey){
                                    condition="";
                                    $scope.isSelect=false;
                                }
                                if(!$scope.isSelect){
                                    $scope.selectedItem='';
                                    self.doSearch(condition);
                                }
                                $scope.isSelect=false;

                            }

                        });
                        //空白区域点击关闭下拉菜单
                        $scope.$on('$changeDropMenuState',function(e,isOpen){
                            $scope.vm.isOpen=isOpen;
                        });
                    };

                    this.searchContacts=function(condition){
                        userList=userAssortment?userAssortment.list:null;
                        return condition &&userList?
                            userList.$query(condition):
                            userList;

                    };
                    this.searchTeams=function(condition){
                        teamList=teamAssortment?teamAssortment.list:null;
                        return condition &&teamList?
                            teamList.$query(condition):
                            teamList;
                    };
                    this.selectItem=function(item,type){
                        $scope.isSelect=true;
                        $scope.vm.selectedItem=item;
                        $scope.vm.key=type=='user' ? $filter('pxUserName')(item) :item.name;

                        this.toggleDropMenu(false);
                        if(angular.isFunction($scope.afterSelect)){
                            $scope.afterSelect({item:item});
                        }

                    };
                    this.doSearch=function(condition){
                        angular.forEach($scope.assortmentList,function(assortment){
                            assortment.list=self.getSearchResult(condition,assortment.type);
                        });
                    };
                    this.getSearchResult=function(condition,type){
                        if(type=='user'){
                            return this.searchContacts(condition);
                        }else{
                            return this.searchTeams(condition);
                        }


                    };
                    this.toggleDropMenu=function(isOpen){
                        if($scope.templateType==='chat'){
                            return;
                        }

                        $scope.vm.isOpen=isOpen;
                        $scope.isOpen=isOpen;
                        //setIsOpen($scope,isOpen);
                    };



                },
                link:function(scope,element,attr,ctrl){
                    ctrl.init();
                    scope.onItemClick=function(item,type){
                        ctrl.selectItem(item,type);
                    };
                    //此处的input有dropdown-toggle角色，当下拉菜单处于关闭状态时，解决input输入文字不显示下拉菜单的问题
                    scope.openDropMenu=function(){
                        $timeout(function(){
                            ctrl.toggleDropMenu(true);
                        },0);

                    };
                }

            };
        })
        .directive('pxSearchInput',function(){
            return {
                restrict:'EA',
                replace:true,
                template:'<input placeholder="" ng-model="vm.key" stop-propagation-element  type="text" ng-click="openDropMenu()" ng-keydown="openDropMenu()" class="form-control px-input-base" />',
                require:['?^pxSearchInputGroup','^?ngModel'],
                link:function(scope,element,attr,ctrl){


                }
            };
        })
        .directive('pxAssortmentList',function(){
            return {
                restrict:'EA',
                templateUrl:'../templates/widget/search-mode.html',
                replace:true,
                link:function($scope,element,attr){

                }
            };
        })

//外部数据
scope.shareConfig={
                    isOpen:false,
                    searchKey:'',
                    isSelected:false,
                    assortmentList:[
                        {title:'群组',list:scope.teams,type:'team'},
                        {title:'对象',list:scope.contactAndMemberList,type:'user',iconSize:'mini'}
                    ],
                    typeName:'任务'
                };

                scope.closePopup=function(){
                    scope.shareConfig.isOpen=false;
                    $rootScope.$broadcast('$changeDropMenuState',false);
                };

//引用的地方
<p class="agenda-share" ng-click="closePopup($event)">
    <h3 ng-bind="::shareItem.title||shareItem.name||shareItem.docName"></h3>
    <form style="padding-left:40px;" name="shareForm" ng-submit="onSubmit($event)">
        <span class="px-label-name">发送到</span>

            <px-search-input-group input-placeHolder="选择当前团队群、联系人"
                                   assortment-list="shareConfig.assortmentList"
                                   is-open="shareConfig.isOpen"
                                   after-select="afterSelect(item)"></px-search-input-group>
        <p class="explain">将{{::shareConfig.typeName}}转发给当前团队群、联系人。</p>
        <p class="px-dialog-footer">
            <button class="px-btn px-btn-primary" ng-disabled="!selectedItem">转发</button>
        </p>
    </form>
</p>

//search-input-list.html
<p ng-switch="templateType">
    <p ng-switch-when="chat">
        <p class="col-sm-12">
            <input px-search-input placeholder="{{inputPlaceholder}}" />
        </p>

        <px-assortment-list ng-repeat="assortment in assortmentList"></px-assortment-list>
    </p>
    <p ng-switch-default>
        <p class="dropdown px-select-block" dropdown is-open="vm.isOpen">
            <input px-search-input  dropdown-toggle placeholder="{{inputPlaceholder}}" />
            <p class="dropdown-menu" role="menu" style="max-height:300px;width:100%;overflow: auto;">
                <px-assortment-list ng-repeat="assortment in assortmentList"></px-assortment-list>
            </p>
        </p>
    </p>


</p>

//search-mode.html
<p class="px-assortment-list" >
    <h6 ng-bind="::assortment.title"></h6>
    <p ng-if="assortment.list.length==0" ng-bind="::'没有找到'+assortment.title" style="padding-left:20px;"></p>
    <ul class="list-unstyled" ng-if="assortment.list.length>0" ng-class="{'px-user-list':assortment.type=='user'}">
        <li ng-repeat="item in assortment.list" ng-click="onItemClick(item,assortment.type)" ng-if="item.targetUid!=currentUser.id">

            <px-user-photo  class="pull-left" ng-if="assortment.type=='user'"
                            user="item.profile||item" size="{{assortment.iconSize}}" show-status="{{assortment.showState}}"></px-user-photo>

            <span ng-if="assortment.type=='file'" class="file-{{assortment.iconSize}}-{{item.suffix}}"></span>

            <span ng-if="assortment.type=='calender'" class="px-icon icon-calendar"></span>

            <span ng-if="assortment.type=='task'" class="px-icon icon-task"></span>

            <a href="javascript:;" ng-bind="item.name" ng-if="assortment.type!='user'"></a>
            <a href="javascript:;" ng-bind="::item|pxUserName" ng-if="assortment.type=='user'"></a>
        </li>
    </ul>
</p>

Answer 1

Mettez-en un autour de $scope.vm.isOpen=isOpen;

$timeout(function(){
    $scope.vm.isOpen=isOpen;
    })

Jetez un oeil