Angular 形式 $pristine 默认设置为 false

Question

我正在我的应用程序中使用 Eternicode's Bootstrap Datepicker。我创建了一个 datepicker 指令，同样用于 Angular 形式。

日期选择器指令：

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 并在控制台上打印它们时，我了解到表单模型有属性是由日期选择器设置的，这就是它的样子：

在同一个 Plunker link 上，如果我在以下表单中评论日期部分是其属性：

$pristine : true
$dirty : false

这就是 form model 现在的样子：

如何使我的表单模型免于损坏，尽管使用了 Date 指令，但将 $pristine 设置为 false 并将 $dirty 设置为 true 会导致问题？

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

提前致谢。

Answer 1

我不完全理解你的用例，但是在你设置了日期选择之后，你为什么不做一个程序化的

$scope.form.$setPristine();

我相信这是在 v1.1 中引入的

Answer 2

我调查了你的代码并观察到，你应该在指令的编译函数中编写以下代码。

 $(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。由于大多数指令不做模板转换，所以不经常使用。

Angular 形式 $pristine 默认设置为 false

Angular form $pristine is set to false by default

datepicker

angularjs

bootstrap-datepicker

angular-directive