一、引入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;
});
});
}
};