Sử dụng cùng một chỉ thị trên nhiều thành phần

Question

Tôi đang cố gắng làm theo ví dụ từ this stackoverflow discussion on date formatting, nó hoạt động rất tốt cho một trang chỉ có một trường ngày. Tuy nhiên, nếu tôi có nhiều trường ngày trên trang, có vẻ như chỉ trường ngày/ng-model đầu tiên sẽ được đặt là, ngay cả các trường ngày khác được chọn.

Dưới đây là các mẫu mã 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> 

Và đây là mã chỉ thị (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() : ""; 
       }); 
      } 
     }; 

Tôi đã cố gắng để làm một phạm vi $ $ xem trên các mô hình mà chúng liên kết với, có vẻ như ngay cả khi tôi đang thay đổi trường nhập người dùng.EndDate, luôn là người dùng.StartDate nhận thay đổi và người dùng.EndDate vẫn không bị ảnh hưởng, ngay cả khi trường "đầu vào" hiển thị chính xác cả hai trường.

Làm cách nào để đảm bảo cả hai trường sẽ nhận mô hình liên kết của chúng được cập nhật chính xác?

Cảm ơn bạn đã trợ giúp.

Answer 1

Bạn cần đưa ra chỉ thị của mình isolated scope.

Hiện tại, nhiều phiên bản của chỉ thị đang chia sẻ cùng một phạm vi, vì vậy việc cập nhật mô hình của bạn không hoạt động như mong đợi.

Hãy xem docs.angularjs.org/guide/directive

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