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 =＆＃34; date＆＃34;更改一个输入。使用相同的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模型（a.data，b.data，c.data，d.data））。虽然这允许单独对每个日期选择器进行更改，但它显然是一个非常糟糕的解决方案。如果有人知道这里可能存在什么问题，我真的很感激任何帮助。它与隔离范围有关，对吗？

Answer 1

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

即使您使用$ scope.date作为唯一变量实现了范围隔离，也会导致不一致。 （如果你想在某些控制器中使用$ scope.date，那么AJS将如何知道你所说的日期选择器值。）

AJS更改所有日期选择器的值是预期行为。

使用不同的变量就是我要做的。即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引用。希望能帮助到你。

使用多个jquery ui日期选择器以角度隔离范围

1 个答案: