我是新來的角,並有問題得到datepicker指令工作。 jsFiddle http://jsfiddle.net/jGU95/9/說明了我一直無法克服的一些問題。angularjs bootstrap datepicker指令問題
的形式非常簡單:
<div ng-app="myApp" ng-controller="Ctrl">
<br>
Date 1
<input type="text" datepicker1={{pickeropts}} ng-model="date1" /> {{date1 | date:MM/dd/yyyy}}
<br>
Date 2
<input type="text" datepicker2={{pickeropts}} ng-model="date2" /> {{date2 | date:MM/dd/yyyy}}
<br>
Date 3
<input type="text" datepicker1 data-date-format="{{format}}" ng-model="date3" /> {{date3 | date:MM/dd/yyyy}}
</div>
的DATEPICKER1指令的原始日期的渲染是在錯誤的格式與實際日期選取器不依賴於日期,即當日期1個文本字段選擇日期選擇器時,將使用今天的日期而不是1975年的日期啓動日期選擇器。一旦從日期選擇器中選擇日期,控件將按預期運行,包括以正確的格式顯示輸出日期字符串。
這裏是DATEPICKER1指令:
.directive('datepicker1', function(){
return {
require: '?ngModel',
link: function($scope, element, attrs, controller) {
var originalRender;
var updateModel = function(ev) {
return $scope.$apply(function() {
return controller.$setViewValue(ev.date);
});
};
if (controller != null) {
originalRender = controller.$render;
controller.$render = function() {
originalRender();
return element.datepicker.ddate = controller.$viewValue;
};
}
return attrs.$observe('datepicker1', function(value) {
var options;
options = {};
if (angular.isObject(value)) {
options = value;
}
if (typeof(value) === "string" && value.length > 0) {
options = angular.fromJson(value);
}
return element.datepicker(options).on('changeDate', updateModel);
});
}
};
})
DATEPICKER2也有日期的原始渲染的問題,也忽略指定的格式選項。這似乎是由控制器中的datepicker元素實例化引起的。$ render函數發生在attrs。$ observe函數之前。
這裏是DATEPICKER2指令
.directive('datepicker2', function(){
return {
require: '?ngModel',
link: function($scope, element, attrs, controller) {
var updateModel = function(ev) {
return $scope.$apply(function() {
return controller.$setViewValue(ev.date);
});
};
if (controller !== null) {
controller.$render = function() {
element.datepicker().data().datepicker.date = controller.$viewValue;
element.datepicker('setValue');
element.datepicker('update');
return controller.$viewValue;
};
}
return attrs.$observe('datepicker2', function(value) {
var options;
options = {};
if (angular.isObject(value)) {
options = value;
}
if (typeof(value) === "string" && value.length > 0) {
options = angular.fromJson(value);
}
return element.datepicker(options).on('changeDate', updateModel);
});
}
};
});
最後,日期3日期選擇器不能正常工作,因爲$ scope.format值沒有正確發送到日期選擇器之前,插成一個字符串。
請幫我找出如何解決任何這些...
史蒂夫