角度日期选择器 bootstrap-ui 在视图中不起作用

Question

我使用由 AngularUI 团队 http://angular-ui.github.io/bootstrap/ 用纯 AngularJS 编写的 Bootstrap 组件

问题是内部视图日期选择器无法正常工作。 所以鉴于我有以下代码：

<input type="text" 
       datepicker-popup="{{format}}" 
       ng-model="datepicker"
       show-weeks="fasle" 
       is-open="opened"
 />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

在控制器中，我尝试通过单击按钮来显示日期选择器：

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

在 scope.opened store 中是真的！ 但什么也没发生；

第二个问题我尝试从日期选择器中检索日期。当我初始化它时，我使用下一个：

scope.datepicker = new Date();
scope.format = "dd-MM-yyyy";

并检索

scope.save = function() {
 console.log(scope.datepicker);
};

日期选择器总是返回当前日期...

但从侧面看，一切都很完美！为什么？

编辑

这是直播demo

尝试更改日期并单击保存。或者尝试通过按钮点击调用 dapicker

Answer 1

将控制器添加到routeProvider:

angular.module('plunker', ['ui.bootstrap'])
  .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'template.html',
                controller: 'DatepickerDemoCtrl'
            })
    });

演示Plunker

HTML

<div class="form-horizontal">
        <input type="text" 
          datepicker-popup="dd-MMMM-yyyy" 
          ng-model="dt" is-open="opened" 
          min="minDate"
          max="'2015-06-22'" 
          datepicker-options="dateOptions" 
          date-disabled="disabled(date, mode)" 
          ng-required="true"
          />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>

JS

angular.module('plunker', ['ui.bootstrap']);
var DatepickerDemoCtrl = function ($scope, $timeout) {

  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.showWeeks = true;
  $scope.toggleWeeks = function () {
    $scope.showWeeks = ! $scope.showWeeks;
  };

  $scope.clear = function () {
    $scope.dt = null;
  };



  $scope.toggleMin = function() {
    $scope.minDate = ( $scope.minDate ) ? null : new Date();
  };
  $scope.toggleMin();

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

  $scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
  };
};