angularjs 整合bootstrap 时间控件

一、引入js

<link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.min.js" ></script>
<script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.fr.js" ></script>
<script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" ></script>
<script src="${basePath}/static/plugin/angular/js/angular.min.js"></script>

二、引入HTML

<input size="16" type="text" readonly class="form_datetime" style="width:120px" format-date ng-time ng-model="finishedDtm">

三、创建angularjs指令

formatDate指令做格式转换
ng-time 初始化bootstrap时间控件
注：有时候格式有问题 修改Date的toJSON方法获取本地时间字符串 Date.prototype.toJSON = function () { return this.toLocaleString(); }

bamboo.angularApp = angular.module('task', [])
                                       .directive('formatDate', function(){
                                          return {
                                                require: 'ngModel',
                                                link: function(scope, elem, attr, ngModelCtrl) {
                                                  ngModelCtrl.$formatters.push(function(modelValue){
                                                    if(modelValue) {
                                                      return modelValue;
                                                    }
                                                  });
                                                  ngModelCtrl.$parsers.push(function(value){
                                                        if(value) {
                                                          return new Date(value);
                                                        }
                                                    });
                                                }
                                              };
                                        }).directive('ngTime', function() {
                                            return {
                                                restrict : 'A',
                                                require : '?ngModel',
                                                link : function($scope, $element, $attrs, $ngModel) {
                                                    if (!$ngModel) {
                                                        return;
                                                    }
                                                    $element.datetimepicker({
                                                        language:  'zh-CN',
                                                        weekStart: 1,
                                                        todayBtn:  1,
                                                        autoclose: true,
                                                        todayHighlight: true,
                                                        startView: 2,
                                                        format: 'yyyy-mm-dd hh:ii',
                                                    });
                                                },
                                            };
                                        });

注：整合easyui时自定义操作列的ng-click事件绑定不生效可以使用   $compile($("#gridTable").parent())($scope); 进行重新渲染

  {field:'openDetails',title:'展开详情',align:'center',resizable:true,width:'80',
                        formatter:function(value,row,index){
                            return  '<button class="btn  btn-sm btn-primary" data-toggle="modal" data-target="#hours_details" ng-click="hoursDetails(\''+row.lId+'\')">工时详情</button>';
                        }
                    }

angularjs使用了其他前端组件有时候渲染有问题需要使用$timeout进行渲染

 function AddHoursController($rootScope,$scope,$timeout,$http){    

        $scope.initAddHours = function(){
             //清理表单数据
             $scope.paramList = [];

             var lId = $("#add_hours [ng-model='laborDetail.lId']").val();
             var laborDetail = {
                     "lId":lId
             }
             //获取所有项目模块
              $.get(contextPath + "/labor/myLabor/hourTask/list.action",laborDetail,function (resp) {
                  var respData = resp.result;
                  for (var i = 0; i < respData.length; i++) {
                    respData[i].isNotEditable = true;
                }

                 $timeout(function() {
                    //生成历史工时数据
                    $scope.laborDetails = respData;
                });

              });
        }

};