Angular格式$ pristine默认设置为false

时间:2016-10-14 07:57:47

标签: angularjs datepicker angular-directive bootstrap-datepicker

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设置的属性,这就是它的外观:

enter image description here

在同一Plunker link上,如果我在下面的表单中注释日期部分是其属性:

$pristine : true
$dirty : false

这就是form model现在的样子:

enter image description here

如何使我的表单模型免于被破坏,这会导致问题,将$ pristine设置为false并将$ dirty设置为true,尽管使用了Date指令?

PS:这是我们当前应用程序中更大用例的抽象。

提前致谢。

2 个答案:

答案 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中引入的