0

我在隔离下面的 date-picker-search 指令的范围时遇到了一些问题。

(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>

所有模型通过单击或键入更新

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

仅通过单击更新模型

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

4

1 回答 1

0

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

即使你实现了作用域的隔离使用$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参考。希望能帮助到你。

于 2016-01-09T04:25:35.093 回答