AngularJS 进阶 (二十二) 实现时间选择插件

一、引导语

      在项目开发过程中，需要实现根据以日期为筛选条件之一，故需要实现时间选择插件。对于未接触的新事物，自己总是感觉不明觉厉。其实，有些实现可以使用很简单的方法即可。以此为例，偶然的一次翻看课本发现 HTML5 中已经设计到此种实现。其中，设置 input 元素的 type 属性为 datetime-local 即可实现。

二、问题

     实际编码过程中，还是出现了问题。$scope.bill_dateBegin 并不能获取到时间选择框中的设置值。

三、原因

     AngularJS support the input type datetime-local since version 1.3.0-beta.1

     原来 AngularJS 1.3.0-beta.1 极其之上的版本才支持 datetime-local 的绑定，那就是自己的版本太低导致的了。经过查看版本，发现自己的版本为 1.3.0.14，应该不低啊。但实验证明，还是自己的版本过低导致的。尝试使用高版本。

四、解决方法

     尝试使用高版本。但使用 1.5.0 版本还是没效果！

     经过一番询问，还是未能够解决问题。自己尝试着试试 type 的其它时间类型，当自己使用 date 类型，发现居然绑定上了，我就呵呵了....而其它的类型例如 datetime、datetime-local 却无法绑定，费解。我只能说 angular 还是不够强大！

     不过问题还是来了。当自己使用如下语句时,确弹出了下图的信息，而我们则需要这样的格式：2015-12-24 12:00:00。明显日期格式需要进行转换。

     bill_dateEnd = $scope.bill_dateEnd; 
     alert(bill_dateEnd);

      有关日期时间的转换问题详见博文《JS 抽离公共函数》。

五、感触

自己的知识面还是比较窄，还是需要多读书《疯狂 HTML 5/CSS 3/JavaScript 讲义》。

六、拓展阅读 ​Angularjs 中 scope 与 rootscope 区别及联系

      scope 是 html 和单个 controller 之间的桥梁，数据绑定就靠他了。rootscope 是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。下面用实例详细的说明一下。

1. js 代码

phonecatApp.controller('TestCtrl',['$scope','$rootScope',      function($scope,$rootScope) {          $rootScope.name = 'this is test';      }  ]);  phonecatApp.controller('Test111Ctrl',['$scope','$rootScope',      function($scope,$rootScope) {          $scope.name = $rootScope.name;      }  ]);

2. html 代码

<div ng-controller="TestCtrl">      I  set the global variable.<strong>{{$root.name}}</strong>  </div>  <div ng-controller="Test111Ctrl">      1,get global variable .<strong>{{name}}</strong><br>      2,get global variable .<strong>{{$root.name}}</strong>  </div>

3.显示结果

I set the global variable.this is test  

1,get global variable .this is test  

2,get global variable .this is test  

      由结果可以看出来，$rootScope.name 设置的变量，在所有 controller 里面都是可以直接用{{$root.name}}来显示的，很强大。那当然也可以赋值给 scope.

​