मेरे इनपुट फ़ील्ड एक दूसरे को अपडेट कर रहे हैं!

यहाँ स्पष्ट रूप से कुछ पास-दर-संदर्भ शेंगेनियाँ हैं, लेकिन मैं इसका पता नहीं लगा सकता।

मेरे पास एक कस्टम निर्देश है जिसे मैं एनजी-रिपीट के साथ स्थापित कर रहा हूं:

<my-dir ng-repeat="obj in mio" obj="obj" other="otro" unique-name="_{{$index}}"></my-dir>

इस निर्देश में एक फॉर्म होता है जिसका इनपुट भी एनजी-दोहराए जाने वाले निर्देश हैं। (फॉर्म के प्रत्येक उदाहरण को इनपुट के समान सेट की आवश्यकता होती है।)

चीजें जो मैंने की हैं:

  • प्रत्येक my-dir रूप और उसके भीतर प्रत्येक इनपुट तत्व को एक अद्वितीय id दिया गया है
  • में एक समग्र track by का उपयोग करने का प्रयास किया नेस्टेड ng-repeat (यानी track by uniqueName + input.varname), लेकिन पैरेंट स्कोप से वेरिएबल में पास नहीं हो सका
  • नेस्टेड ng-repeat को ng-if में लपेटकर देखें कि क्या इससे एक सुविधाजनक आइसोलेट स्कोप बना है

मेरे इनपुट फ़ील्ड अभी भी एक दूसरे को अपडेट कर रहे हैं।

अतिरिक्त कोड

my-dir.html में:

<form name="{{uniqueName}}">
  <parameter-directive
    ng-repeat="input in otro.inputs"
    type="input.vartype"
    name="input.varname"
    id-key="{{uniqueName}}"
    ng-model="input">
  </parameter-directive>
</form>

और parameter-directive.html में:

<label for="{{name}}" class="pull-left">{{name}}</label>
<input
  ng-required="{{defaultValue == null}}"
  id="{{idKey + '_' + name}}"
  ng-model="ngModel.val"
  ng-attr-type="{{inputType}}"
>

(निर्देश js से कोड भी शामिल करने में प्रसन्नता हो रही है, लेकिन यह प्रश्न पहले से ही काफी लंबा है।)

0
alexanian 12 जून 2019, 21:20

1 उत्तर

सबसे बढ़िया उत्तर

पता चला कि इस मुद्दे का यूनिक आईडी की कमी वाले निर्देशों से कोई लेना-देना नहीं था।

मुद्दा यह था कि parameter-directive का ng-model मूल निर्देश से एक ही वस्तु के लिए बाध्य था (उपरोक्त उदाहरण में, वस्तु other="otro" के साथ पारित हुई थी) और संदर्भ द्वारा पारित की गई थी।

otro ऑब्जेक्ट भी एक एपीआई से लोड किया जाता है, इसलिए मैंने एक broadcast ईवेंट जोड़ना समाप्त कर दिया:

my-dir.directive.js में:

$scope.getOtro = function getOtro() {
  $http.get(URL)
    .then((resp) => {
      $scope.otro = resp.data;
      $scope.$broadcast('otro-loaded', $scope.otro.inputs);
      }
  };

parameter-directive.directive.js में:

$scope.$on('otro-loaded', (_, inputs) => {
    $scope.inputs = angular.copy(inputs);
});

मैं यह दावा नहीं करूंगा कि यह इस समस्या को हल करने का एक विशेष रूप से सुरुचिपूर्ण तरीका है, लेकिन इसने चाल चली।

0
tessafyi 13 जून 2019, 05:26