在 angular 中使用多个 jquery ui 日期选择器隔离范围

Question

我在隔离下面的日期选择器搜索指令的范围时遇到了一些问题。

(function(){
'use strict';

angular.module('ganeshaApp')
.directive('datePickerSearch', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl){
            $(function(){
                element.datepicker({
                    dateFormat: 'd/m/yy',
                    onSelect: function(date){
                        scope.date = date;
                        scope.$apply();
                    }
                })
            });         
        }
    }
})
})();

在我的第一次尝试中，我尝试使用此代码，但正如预期的那样，使用 ng-model="date" 更改一个输入会更新所有引用具有相同 ng-model 的指令的输入。

                    <tr>
                        <td>Publication Date:</td>
                        <td greyed-dates>
                            between
                            <div class="start inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>

                            </div>
                            <span>and</span>
                            <div class="end inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Enactment Date:</td>
                        <td greyed-dates>
                            between
                            <div class="start inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>

                            </div>
                            <span>and</span>
                            <div class="end inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>
                            </div>
                        </td>
                    </tr>

All models update by clicking or typing

我认为隔离指令中的范围可以解决问题。它在一定程度上确实如此，当您只是单击日历以输入日期时，但是当您尝试手动输入日期时，所有引用该指令的输入都会再次更新。

Models update by clicking only

我能够解决这个问题的唯一方法是通过给每个元素一个随机的父引用来改变每个元素的 ng-models (a.data, b.data, c.data, d.data).虽然这允许单独对每个日期选择器进行更改，但这显然是一个非常糟糕的解决方案。如果有人知道这里可能有什么问题，我将非常感谢您的帮助。这与隔离范围有关，对吗？

Answer 1

据我所知，您的第二种解决方案是唯一的方法。

即使你实现了范围的隔离使用$scope.date作为唯一的变量，它也会带来不一致。 （如果你想在某些控制器中使用 $scope.date 怎么办，AJS 如何知道你在谈论哪个 date-picker 值）。

AJS 更改所有 date-picker 的值是 预期的行为。

使用不同的变量是我会做的。即 a.date、b.date ..

你可以这样使用它

 link: function(scope, element, attrs, ngModelCtrl){
            $(function(){
                element.datepicker({
                    dateFormat: 'd/m/yy',
                    onSelect: function(date){
                        scope.$apply(function () {
                        ngModelCtrl.$setViewValue(date);
                    });
                    }
                })
            });         
        }

在 HTML

<input type="text" ng-model="a.date" date-picker-search placeholder="dd/mm/yyyy"/>

<input type="text" ng-model="b.date" date-picker-search placeholder="dd/mm/yyyy"/>

等等。

这里是 codepen 参考。希望能帮助到你。

在 angular 中使用多个 jquery ui 日期选择器隔离范围

Isolating scopes with multiple jquery ui date pickers in angular

jquery-ui

datepicker

angularjs

angularjs-directive

isolate-scope