Question

我有一个包含两个日期值的表单。我想验证：日期必须低于日期2 。我想做一个指令来管理这个。所以，我将我的指令命名为 lowerThanDate ，我将其用于文本输入。该指令使用两个日期属性：日期和 comparisonDate 。我想比较这些值，以了解日期是否低于比较日期。

我正在使用范围。$ eval 来获取这些日期值并进行比较。但是，问题是范围。$ eval 返回的是先前的值而不是实际值。

所以，问题是：如何获得实际日期值？

我的问题是plunker。对不起，如果我的问题很愚蠢，我在Angular中很新。提前谢谢你。

Answer 1

angularjs input directive自动更新ng-model属性绑定到输入的数据属性。随着文本框中的值发生更改，绑定属性也会发生更改。

此外，来自ui-bootstrap库的datepicker-popup指令已经处理了日期选择事件以更新数据绑定属性（在本例中为job.start_date）。这意味着您不必绑定到元素的focusout事件; datepicker指令正在处理这个问题。

由于您在自定义指令中需要ngModel控制器，并且datepicker-popup已在所选日期更改时将更新应用于数据绑定属性，因此您只需{{1} } $watch的值用于更改。这也意味着可以完全消除ngModel.$modelValue属性。

考虑到所有这些，指令的Date函数的主体变为：

link

这是updated plunker。

我还更进一步，充分实现了使用angularjs form validation功能的lowerThanDate功能。当所选日期不低于比较日期时，scope.$watch(function(){return ngModel.$modelValue}, function(){ console.log(ngModel.$modelValue); console.log(scope.$eval(attrs.comparsionDate)); }); $error属性可由指令设置，并在HTML中用于显示消息/保持表单不被提交。 / p>

以下是我发现有用的表单验证的the plunker和a blog post。

Answer 2

以下应该可以解决问题。您要做的是使用ng-model属性将日期输入绑定到值。您的指令（在我的示例中为验证器）将具有隔离范围。日期：'='设置本地值（日期）和父作用域值（dateInput）之间的双向绑定。在link函数中，您可以将dateValidation指定给指令的作用域，该作用域将在日期之间进行比较。

最后，ng-show ='dateValidation（date，comparisonDate）'根据dateValidation函数是否通过显示和隐藏警告。

另请注意，comparisonDate在HTML中拼写不同。

angular.module('YourApp')
    .directive('validator', function() {
        return {
            restrict: 'E',
            template: "<div ng-show='dateValidation(date, comparisonDate)'>Dates are out of order</div>",
            scope: {
                date:'=',
                comparisonDate:'='
            },
            link: function(scope) {
                scope.dateValidation = function(date, comparisonDate) {
                    // Your date comparison logic goes here
                    return parseInt(date) > parseInt(comparisonDate);
                };
            }
        }
    });

在HTML中，您希望将日期附加到ng-model属性，如下所示：

<p>Date 1: <input type="text" ng-model="dateInput"></p>
<p>Date 2: <input type="text" ng-model="comparisonDateInput"></p>

<validator date="dateInput" comparison-date="comparisonDateInput">

好的，所以我将这些日期视为整数，这不完全是你想要的。然而，这听起来并不像是你的关键点。希望这有帮助！

范围。$ eval（）返回旧值

2 个答案: