对多个元素使用相同的指令答案

【问题标题】：Using the same directive on multiple elements对多个元素使用相同的指令
【发布时间】：2013-07-12 00:00:07
【问题描述】：

我正在尝试遵循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 保持不变，即使“输入”字段正确显示这两个字段。

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

感谢您的帮助。

【问题讨论】：

你需要给你的指令一个isolated scope - 现在，指令的多个实例共享相同的范围，所以更新你的模型没有按预期工作。看看docs.angularjs.org/guide/directive
@AlexOsborn 您应该将其写下来作为答案，以更清楚地表明这不是未解决的问题。这是我的解决方案。

标签： angularjs angularjs-directive

【解决方案1】：

你需要给你的指令一个isolated scope。

目前，该指令的多个实例共享相同的范围，因此更新模型无法按预期工作。

看看docs.angularjs.org/guide/directive

require: '^ngModel',
restrict: 'A',
scope: {
    ...
},
link: function (scope, elm, attrs, ctrl) {
    ....

【讨论】：