Angularjs简单的datepicker使用控制器而不是$ scope

Question

Angularjs简单的datepicker使用控制器而不是$ scope

Rob*_*_UK 2 daterangepicker angularjs angular-ui-bootstrap

我正在尝试使用angular-ui bootstrap作为日期范围.

http://angular-ui.github.io/bootstrap/#/datepicker

该链接包含一些很好的例子.但是,我想使用controller as语法而不是上面链接中显示的范围.

我试过它,如下所示.但它点击时没有显示日历框.它没有返回任何错误,所以我有点失去了我需要做什么.我想我的榜样很接近.

这是我对小提琴的尝试

下面的代码片段..

js_file.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {

  self = this;
  self.someProp = 'Check This value displays.. confirms controller initalised'

  self.opened = {};
  self.open = function($event) {

    $event.preventDefault();
    $event.stopPropagation();

    self.opened = {};
    self.opened[$event.target.id] = true;

    // log this to check if its setting the log    
    console.log(self.opened);

  };

  self.format = 'dd-MM-yyyy'
});

Run Code Online (Sandbox Code Playgroud)

的index.html

<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
  #dateFrom, #dateTo { width: 200px;}
</style>

  {{ demo.someProp }}

  <div class="form-group">

      <div class="input-group">

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


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

      </div>

  </div>

</div>
</body>

Run Code Online (Sandbox Code Playgroud)