Question

我有一个使用完整日历的Angular应用。我有一个Full Calendar custom button，当用户点击时，应该打开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';，但除非我调整窗口大小，否则这不起作用。如何切换选择器的可见性？

Answer 1

如果调整问题请尝试使用此功能

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

然后单击该按钮调用此函数。希望它可能会有所帮助

Answer 2

尝试使用$applyAsync包围来电，如：

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

因为看起来这发生在angularjs范围之外。

如何在点击时显示Angular UI Bootstrap日期选择器？

2 个答案: