0

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

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

所以，问题是：我怎样才能得到实际的日期值？

这是我的问题。抱歉，如果我的问题很愚蠢，我对 Angular 还是很陌生。提前谢谢你。

4

2 回答 2

2

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

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

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

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

scope.$watch(function(){return ngModel.$modelValue}, function(){
    console.log(ngModel.$modelValue);
    console.log(scope.$eval(attrs.comparsionDate));
});

这是更新的 plunker。

我还更进一步，利用 angularjs表单验证功能完全实现了 lowerThanDate 功能。当所选日期不低于比较日期时，可以由指令设置$error属性，并在HTML中使用以显示消息/防止表格被提交。ngModel

这是plunker，这是我发现有用的关于表单验证的博客文章。

于 2013-09-27T22:23:49.173 回答
0

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

最后，一个 ng-show='dateValidation(date, compareDate)' 根据 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">

好的，所以我将这些日期视为整数，这并不是您想要的。但是，听起来这并不是你的症结所在。希望这可以帮助！

于 2013-09-27T05:01:34.790 回答