我需要使用angular bootstrap创建一个带日期和时间的输入字段.
我发现这个 datetime picker看起来很兴奋我需要 – 在一个字段中的日期和时间,并阻止用户错误的版本.
我写了一个指令,datepickers开始,但它改变了视图,模型没有改变……我也试过onSelect,但也没有任何反应
我发现这个 datetime picker看起来很兴奋我需要 – 在一个字段中的日期和时间,并阻止用户错误的版本.
我写了一个指令,datepickers开始,但它改变了视图,模型没有改变……我也试过onSelect,但也没有任何反应
<div class="container container-fluid" ng-controller="Ctrl1">
2+2={{2+2}},var1={{var1}}
<form class="form-horizontal" novalidate name="form" ng-submit="submit()">
<div class="well">
<div id="date" class="input-append" datetimez ng_model="var1">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" id="input1" name="input1" ng_model="var1"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
</form>
</div>
JS
var project = angular.module('project',['ui.bootstrap']);
project.directive('datetimez',function() {
return {
restrict: 'A',require : 'ngModel',link: function(scope,element,attrs,ngModelCtrl) {
$(function(){
element.datetimepicker({
dateFormat:'dd/MM/yyyy hh:mm:ss',language: 'pt-BR',onSelect:function (date) {
//alert('zz');
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
};
});
project.controller('Ctrl1',['$scope','$rootScope',function(scope,rootScope){
scope.var1="123";
}]);
怎么解决？连接？
解决方法
所以,问题是：
>在div id = date元素中更改ng_modelper ng-model;
>从input元素中删除ng_model并实现ngModelCtrl.$render函数,以便对元素进行模型更改
>根据component docs：
The only event exposed is ‘changeDate’,which will expose ‘date’ and ‘localDate’ properties on the event object
所以你需要以其他方式处理change事件,看看：
element.datetimepicker({
dateFormat:'dd/MM/yyyy hh:mm:ss',language: 'pt-BR'
}).on('changeDate',function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
一些额外的提示：
>如前所述,删除内部ng模型并实现ngModelCtrl.$render来处理模型更改
>使用template属性来封装组件的内部元素
使用$render的一个非常简单的例子：
var picker = element.data('datetimepicker');
ngModelCtrl.$render = function() {
if (ngModelCtrl.$modelValue) {
picker.setLocalDate(ngModelCtrl.$modelValue);
} else {
picker.setLocalDate(null);
}
}