Using the same directive on multiple elements

Question

I am trying to follow the example from this stackoverflow discussion on date formatting, it works very well for a page only has one single date field. However, if I have more than one date fields on the page, it seems like only the first date field/ng-model will get set, even other date fields are selected.

Below is the HTML template code:

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

And here is the directive code (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() : "";
                });
            }
        };

I have tried to do a $scope.$watch on the models they bind to, it seems like even if I am changing the user.EndDate input field, it is always user.StartDate gets the change and user.EndDate remain untouched, even if the "input" field is displaying both fields correctly.

How do I make sure both fields will get their bind model updated correctly?

Thank you for helping.

Answer 1

You need to give your directive an isolated scope.

Right now, multiple instances of the directive are sharing the same scope, so updating your model is not working as expected.

Take a look at docs.angularjs.org/guide/directive

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