Angular UI Bootstrap 날짜 선택 도구를 클릭하면 어떻게 표시합니까?

전체 캘린더를 사용하는 각도 앱이 있습니다. Full Calendar custom button 사용자가 클릭 할 때 Angular Bootstrap Datepicker 열어야합니다. 현재 CSS 가시성을 토글하고 있지만 어떤 이유로 창 크기를 조정하지 않으면 (버튼을 클릭 한 후) 날짜 선택 도구가 표시되지 않습니다.Angular UI Bootstrap 날짜 선택 도구를 클릭하면 어떻게 표시합니까?

내 템플릿 :

<div id="cal-go-to-date" ng-style="goToDate.style"> 
    <div uib-datepicker ng-model="goToDate.dt" class="well well-sm" datepicker-options="goToDate.options"></div> 
</div>

내 각도 컨트롤러 :

$scope.uiConfig = { 
    calendar: { 
    // Other configuration 
    header: { 
     center: 'title' 
    }, 
    customButtons: { 
     goToDate: { 
     text: 'go to date', 
     click: function(event) { 
      $scope.goToDate.style.visibility = 'visible'; 
     } 
     } 
    }, 
    // Other configuration 
    } 
}; 

$scope.goToDate = { 
    dt: new Date(), 
    options: { 
     datepickerMode: 'month', 
     minMode: 'month' 
    }, 
    style: { 
     'position': 'absolute', 
     'top': '224px', 
     'left': '76px', 
     'min-height': '290px', 
     'z-index': '99999', 
     'visibility': 'hidden' 
    } 
    };

내가 $scope.goToDate.style.visibility = 'visible';를 호출 오전하지만 난 창 크기를 조정하지 않는 한 문제가 해결되지 않습니다. 피커의 가시성을 토글하려면 어떻게해야합니까?

출처

2017-12-13 Nag

크기가 적용되기 때문에 범위 밖에서 발생하는 것 같습니다. 가시성 속성을 언제 어떻게 변경하는지 보여주는 코드를 게시 할 수 있습니까? – Archer

@Archer 질문을 업데이트했습니다. uiConfig 내부의'click' 함수를보십시오. – Nag

['uib-datepicker-popup'] (https://angular-ui.github.io/bootstrap/#datepickerPopup)을 사용하지 않는 이유는 무엇입니까? 또는 최소한 $'scope와 같이 ['$ applyAsync'] (https://code.angularjs.org/1.3.8/docs/api/ng/type/$rootScope.Scope#$applyAsync)로 호출을 시도해보십시오. anglejs 범위 밖에서 발생하는 것처럼 보이기 때문에 $ applyAsync (function() {$ scope.goToDate.style.visibility = 'visible';}); –

같은 $applyAsync로 전화를 포장하려고 도움이 될 희망 :

$scope.$applyAsync(function(){ $scope.goToDate.style.visibility = 'visible'; });

이 AngularJS와 범위 밖에서 발생하는 것 같습니다 때문이다.

출처

2017-12-13 11:05:41

의 문제 크기 조정 시도가이 기능을

$scope.windowResize = function() { 
      setTimeout("$(window).trigger('resize')",400); 
     };

를 사용하고 해당 버튼을 클릭 할 때이 함수를 호출합니다. 는

출처

2017-12-13 10:20:41

왜 400입니까? 왜 안돼? 여기에 몇 가지 마법의 숫자가 있습니다 : D –

Angular UI Bootstrap 날짜 선택 도구를 클릭하면 어떻게 표시합니까?

답변

관련 문제