angularjs – 对多个元素使用相同的指令

发布时间：2020-12-17 07:26:35 所属栏目：安全来源：网络整理

导读：我试图按照 this stackoverflow discussion on date formatting的例子,它非常适用于页面只有一个日期字段.但是,如果页面上有多个日期字段,则似乎只会设置第一个日期字段/ ng-model,甚至会选择其他日期字段. 以下是HTML模板代码： div class="input-append" m

我试图按照 this stackoverflow discussion on date formatting的例子,它非常适用于页面只有一个日期字段.但是,如果页面上有多个日期字段,则似乎只会设置第一个日期字段/ ng-model,甚至会选择其他日期字段.

以下是HTML模板代码：

<div class="input-append" my-Datepickerloaded>
        <input type="text" ng-model="user.StartDate" my-Datepickerformater></input>
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
            </i>
        </span>
    </div>


    <div class="input-append" my-Datepickerloaded>
        <input type="text" ng-model="user.EndDate" my-Datepickerformater></input>
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
            </i>
        </span>
    </div>

这是指令代码(myDatePickerformater)：

return {
            require: '^ngModel',restrict: 'A',link: function (scope,elm,attrs,ctrl) {
                var moment = $window.moment,dateFormat = 'MM/DD/YYYY';

                attrs.$observe('myDatepickerformater',function (newValue) {
                    ctrl.$modelValue = new Date(ctrl.$setViewValue);
                });

                ctrl.$formatters.unshift(function (modelValue) {
                    scope = scope;
                    if (!dateFormat || !modelValue) return '';
                    var retVal = moment(modelValue).format(dateFormat);
                    return retVal;
                });

                ctrl.$parsers.unshift(function (viewValue) {
                    scope = scope;
                    var date = moment(viewValue,dateFormat);
                    return (date && date.isValid() && date.year() > 1950) ? date.toDate() : "";
                });
            }
        };

我试图在他们绑定的模型上进行$scope.$watch,看起来即使我正在更改user.EndDate输入字段,它总是user.StartDate获取更改并且user.EndDate保持不变,甚至如果“输入”字段正确显示两个字段.

如何确保两个字段都能正确更新其绑定模型？

谢谢你的帮忙.

您需要为指令指定一个独立的范围.

现在,该指令的多个实例共享相同的范围,因此更新模型不能按预期工作.

看看docs.angularjs.org/guide/directive

require: '^ngModel',scope: {
    ...
},ctrl) {
    ....

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!