Question

AngularJS 的 UI Bootstrap 非常新。我正在尝试使用datepicker，但它没有打开。

脚本：

<script src="../Scripts/ui-bootstrap-tpls-0.10.0.min.js"></script>
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                    "~/Scripts/angular.js",
                    "~/Script/angular-route.js"));

bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
                    "~/Content/bootrap.css",
                    "~/Content/bootstrap-datetimepicker.min.css"));

Answer 1

将$ timeout注入您的控制器。

将open（）更改为：

 $scope.open = function () {

  $timeout(function() {
    $scope.opened = true;  
  });

};

并将data-is-open更改为：

data-is-open="opened"

see it working here

Answer 2

@xyclos提供了一个非常有见地的好答案但是当它与重复的模板一起使用时，它会导致所有页面上的datepicker同时开放。

这是因为它将所有的datepicker绑定到单个范围变量“open”。

这让我意识到UI Bootstrap的示例页面具有完全相同的问题。我能够通过下面突出显示的更改解决这个问题（无论如何，我认为这更加直截了当。）

<div ng-repeat="surgery in surgeries">
    <label>SurgeryDate</label>
    <p class="input-group">
        <input type="text" 
             is-open="surgery.open"               class="form-control" 
               uib-datepicker-popup="yyyy-MM-dd" 
               ng-model="surgery.SurgeryDate" 
        />
        <span class="input-group-btn">
            <button type="button" 
                ng-click="surgery.open = true"                    class="btn btn-default">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </p>
</div>

UI Datepicker无法打开

2 个答案:

is-open="surgery.open"

ng-click="surgery.open = true"