本人遇到一个很奇怪的问题,点击菜单中的选择项,大多数情况下菜单隐藏正常,小部分情况就出现了如上图情况。
(我检查过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:'', 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); };
//引用的地方
//search-input-list.html
//search-mode.html
$scope.vm.isOpen=isOpen;
の周りに 1 つ配置します。 リーリー見てください