問題描述

本人遇到一個很奇怪的問題，點擊菜單中的選擇項，大多數情況下菜單隱藏正常，小部分情況就出現了如上圖情況。（我檢查過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()' />’,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 ng-click='closePopup($event)'> <h3 ng-bind='::shareItem.title||shareItem.name||shareItem.docName'></h3> <form 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 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 dropdown is-open='vm.isOpen'> <input px-search-input dropdown-toggle placeholder='{{inputPlaceholder}}' /> <p 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 > <h6 ng-bind='::assortment.title'></h6> <p ng-if='assortment.list.length==0' ng-bind='::’沒有找到’+assortment.title' style='padding-left:20px;'></p> <ul 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 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>

問題解答

在 $scope.vm.isOpen=isOpen;外圍套一個

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

看看