Angularjs 对多个元素使用相同的指令
我试着从中学习这个例子,它非常适用于只有一个日期字段的页面。但是,如果页面上有多个日期字段,则似乎只有第一个日期字段/ng模型将被设置,甚至选择了其他日期字段 下面是HTML模板代码:Angularjs 对多个元素使用相同的指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我试着从中学习这个例子,它非常适用于只有一个日期字段的页面。但是,如果页面上有多个日期字段,则似乎只有第一个日期字段/ng模型将被设置,甚至选择了其他日期字段 下面是HTML模板代码: <div class="input-append" my-Datepickerloaded> <input type="text" ng-model="user.StartDate" my-Datepickerformater></input>
<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>
我试着做了一个$scope。$监视他们绑定到的模型,似乎即使我正在更改user.EndDate输入字段,它始终是user.StartDate获得更改并且user.EndDate保持不变,即使“input”字段正确显示了这两个字段
如何确保这两个字段的绑定模型都得到正确更新
谢谢你的帮助 您需要为您的指令提供一个
隔离范围
目前,该指令的多个实例共享同一范围,因此更新模型无法按预期工作
看看
您需要为您的指令指定一个
隔离范围
——目前,指令的多个实例共享同一范围,因此更新您的模型无法按预期工作。看看@AlexOsborn,你应该把它写下来作为一个答案,让它更清楚地表明这不是一个悬而未决的问题。这是我的解决办法。
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() : "";
});
}
};
require: '^ngModel',
restrict: 'A',
scope: {
...
},
link: function (scope, elm, attrs, ctrl) {
....