각도 재질 : md- 다이얼로그에서 md-select가 닫히지 않음

Question

나는 md 입력이 적고 md-select 인 간단한 지시문을 만들었습니다.

몇 페이지에서 내 지시문을 사용했는데 모든 것이 정상적으로 작동했지만 이제는 md-dialog 내부에서 사용하고 싶습니다. 예상대로 작동하지 않습니다. md-select-menu를 닫을 수 없습니다. 나는 그것의 외부를 클릭한다.

사용자가 메뉴를 닫을 수있는 유일한 두 가지 방법은 옵션을 선택하거나 대화 상자를 닫는 것입니다.

그렇게 나쁘지는 않지만 오히려 짜증납니다.

<md-dialog aria-label="Modal" ng-cloak flex="75"> 
    <md-toolbar ng-class="md-primary"> 
     <div class="md-toolbar-tools"> 
      <h2 translate>personModal.update</h2> 
      <span flex></span> 
      <md-button class="md-icon-button" ng-click="cancel()"> 
       <md-icon md-svg-src="img/ic_close_white.svg" aria-label="Close dialog"></md-icon> 
      </md-button> 
     </div> 
    </md-toolbar> 
    <person-form person="person"></person-form> 
</md-dialog> 

그리고 지시 내용 : : 나는 각도 1.5 각도 재료 1.0을 사용하고

<form name="createPersonForm" layout="row" layout-align="space-between center" class="bg-sec query-fields"> 
    <md-input-container flex class="full-width-input"> 
     <label translate>createPerson.form.firstname</label> 
     <input name="firstname" ng-model="person.firstname" required md-asterisk/> 
     <div ng-messages="createPersonForm.firstname.$error" 
      ng-show="createPersonForm.firstname.$touched"> 
      <div ng-message="required" translate> 
       createPersonForm.errors.firstnameMissing 
      </div> 
     </div> 
    </md-input-container> 

    <!--      --> 
    <!-- Other md-inputs here --> 
    <!--      --> 

    <md-input-container flex class="consumption-filter full-width-input"> 
     <label translate>createPerson.form.contact</label> 
     <md-select name="contact" ng-model="person.contactId" required> 
      <md-option ng-repeat="contact in contacts" ng-value="{{contact.id}}"> 
       <span>{{contact.name}}</span> 
      </md-option> 
     </md-select> 
     <div class="md-errors-spacer"></div> 
     <div ng-messages="createPersonForm.contact.$error" 
      ng-show="createPersonForm.contact.$touched"> 
      <div ng-message="required" translate> 
       createPersonForm.errors.contactMissing 
      </div> 
     </div> 
    </md-input-container> 

    <md-button class="md-raised bg-white" ng-click="createPerson()" ng-disabled="createPersonForm.$invalid" ng-hide="loading" ><span translate>createPersonForm.errors.createButton</span></md-button> 
    <md-progress-circular md-mode="indeterminate" class="md-accent" ng-show="loading"></md-progress-circular> 
</form> 

여기

대화의 내용이다.

나는 Z- 인덱스를 가지고 놀고 각/각진 재질을 업그레이드했지만 문제를 해결하지 못했습니다.

md-select가 포커스를 잃을 때 프로그래밍 방식으로 메뉴를 닫을 것을 고려하고 있지만 다소 추한 것을 발견했습니다. 그리고 나는 그것을 어떻게해야할지 모르겠다.

미리 감사드립니다.

Answer 1

관심있는 사람들은 내 문제를 해결하기 위해 무엇을했는지 알아보십시오. 나는 그것이 가장 우아한 해결책이 아니라는 것을 알고 있지만 그것은 나를 위해 일했습니다. 누구든지 더 좋은 아이디어를 가지고 있다면 우리와 함께 나눌 수 있습니다!

HTML :

  <md-input-container flex> 
       <label>Category</label> 
       <md-select ng-model="selectedCategory" md-on-open="dirtyFix()"> 
        <md-option ng-repeat="cat in categories" ng-value="{{cat}}" ng-selected="$first">{{cat.name}} 
        </md-option> 
       </md-select> 
      </md-input-container> 

JS :

$scope.dirtyFix= function() { 
    $timeout(function() { 
     $(".md-scroll-mask").css("z-index", 899); 
     $(".md-scroll-mask").click(function() { 
      $(".md-select-menu-container").remove(); 
      $(".md-scroll-mask").css("z-index", -1); 
     }); 
    }, 500); 
} 

CSS :

.md-select-menu-container { 
    z-index: 900; 
} 

모달 렌더링 수 있도록 시간 제한을 설정했고, 다음에 z-지수에 ClickListener 장난감 .

완벽하지는 않지만 어쩌면 영감을 줄 수 있습니다! Freego에 의해 제안 된 방법을 사용하여

Answer 2

위의 각 재료 1.1.5

TypeError: Cannot read property '$viewValue' of undefined 

나는이 함께 <md-backdrop />에 대한 Z- 인덱스를 설정하여 각 재료 1.1.5에서 수정 된있어 나를 위해 오류가 발생합니다 .md-select-menu-container.

.md-select-menu-container { 
    z-index: 900; 
} 

md-backdrop.md-select-backdrop { 
    z-index: 899; 
}