angular ui bootstrap datepicker is-open 指令不起作用

Question

我正在尝试在我的项目中使用 angularjs ui bootstrap datepicker，但是当我深入研究代码时，我从示例中获取的相同代码似乎无法正常工作，我意识到问题出在 is-open attribute.sample我试图在我的项目上运行的代码是。

<section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Datepicker</strong></div>
        <div class="panel-body" data-ng-controller="DatepickerDemoCtrl">
            <div class="row">
                <div class="col-sm-4">
                    <div class="input-group ui-datepicker">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" 
                               class="form-control"
                               datepicker-popup="{{format}}"
                               ng-model="dt"
                               is-open="opened"
                               min="minDate"
                               max="'2015-06-22'"
                               datepicker-options="dateOptions" 
                               date-disabled="disabled(date, mode)"
                               ng-required="true" 
                               close-text="Close">
                    </div>
                    <div class="callout callout-info">
                        <p>Date is: {{dt | date:'fullDate'}}</p>
                    </div>
                </div>

                <div class="col-sm-8">
                    <p>
                        Format:
                        <span class="ui-select">
                            <select ng-model="format"
                                    ng-options="f for f in formats"></select>
                        </span>
                    </p>

                    <button class="btn btn-sm btn-info" ng-click="today()">Today</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
                    <div class="space"></div>
                    <button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
                </div>
            </div>
        </div>
    </section>


.controller('DatepickerDemoCtrl', [
    '$scope', function($scope) {
      $scope.today = function() {
        return $scope.dt = new Date();
      };
      $scope.today();
      $scope.showWeeks = true;
      $scope.toggleWeeks = function() {
        return $scope.showWeeks = !$scope.showWeeks;
      };
      $scope.clear = function() {
        return $scope.dt = null;
      };
      $scope.disabled = function(date, mode) {
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
      };
      $scope.toggleMin = function() {
        var _ref;
        return $scope.minDate = (_ref = $scope.minDate) != null ? _ref : {
          "null": new Date()
        };
      };
      $scope.toggleMin();
      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        return $scope.opened = true;
      };
      $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
      };
      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
      return $scope.format = $scope.formats[0];
    }
  ])

更新

这里是演示 plunker 我已经尝试分配 $parent.opened 以及仍然无法正常工作

Answer 1

问题是您没有使用控制器中提供的 open($event) 函数来打开日期选择器本身。

FORKED PLUNKER

<input type="text" class="form-control" datepicker-popup="{{format}}" 
                ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" 
                datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
                ng-required="true" close-text="Close"
                ng-click="open($event)" />

注意我在日期选择器输入中添加的ng-click 事件，当您单击输入元素时，它将打开日期选择器。同样对于输入元素右侧的字体很棒的日历按钮，我也添加了一个ng-click 以在单击时打开日历：

<span class="input-group-addon" ng-click="open($event)">
  <i class="fa fa-calendar"></i>
</span>

此外，您在 plunker 中添加了 bootstrap.js 脚本。既然你已经是UI-Bootstrap，那么使用依赖于JQuery 的bootstrap.js 将是多余的。