Question

我在我的应用中使用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：这是我们当前应用程序中更大用例的抽象。

提前致谢。

Answer 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。由于大多数指令不进行模板转换，因此不经常使用它。

Answer 2

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

$scope.form.$setPristine();

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

Angular格式$ pristine默认设置为false

2 个答案: