Как отобразить средство выбора даты Angular UI Bootstrap при нажатии?

У меня есть приложение Angular, которое использует полный календарь. У меня есть пользовательская кнопка "Полный календарь", которая, когда пользователь нажимает, должна открывать Angular Bootstrap Datepicker. В настоящее время я переключаю видимость CSS, но по какой-то причине средство выбора даты не отображается (после нажатия кнопки), пока я не изменю размер окна.

Мой шаблон:

<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'; но это не сработает, если я не изменю размер окна. Что я могу сделать, чтобы переключить видимость сборщика?

Источник

2 ответа

Решение

Попробуйте перевести звонок на $applyAsync лайк:

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

поскольку, похоже, это происходит за пределами области видимости angularjs.

Источник

Если проблема заключается в изменении размера, попробуйте использовать эту функцию

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

а затем вызвать эту функцию по нажатию этой кнопки. Надеюсь, это поможет

Источник
Другие вопросы по тегам