Plunker link我的用例。
我在我的应用中使用Eternicode's Bootstrap Datepicker。我创建了一个datepicker指令,并以Angular形式使用。
Datepicker指令:
angular.module('MyApp', [])
.directive('myDatePicker', function($compile) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
$(element[0]).datepicker().on("change", function(e) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(element.val());
});
});
}
};
});
最初加载Angular表单时,其属性如下:
$pristine : false
$dirty : true
当我watch
form model
并在控制台上打印时,我理解表单模型具有由datepicker设置的属性,这就是它的外观:
在同一Plunker link上,如果我在下面的表单中注释日期部分是其属性:
$pristine : true
$dirty : false
这就是form model
现在的样子:
如何使我的表单模型免于被破坏,这会导致问题,将$ pristine设置为false并将$ dirty设置为true,尽管使用了Date指令?
PS:这是我们当前应用程序中更大用例的抽象。
提前致谢。
答案 0 :(得分:1)
我已经调查了你的代码并观察到,你应该在编译函数指令中编写以下代码。
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
它将解决您的问题。
所以您的指令如下所示:
.directive('myDatePicker', function($compile) {
return {
restrict: 'A',
require: 'ngModel',
compile: function(scope, element, attrs) {
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
},
link: function(scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker().on("change", function(e) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(element.val());
});
});
}
};
编译函数处理转换模板DOM。由于大多数指令不进行模板转换,因此不经常使用它。
答案 1 :(得分:0)
我不完全理解您的用例,但 之后您设置了日期选择,为什么不做一个程序化的
$scope.form.$setPristine();
我相信这是在v1.1中引入的