Angular mehrere Direktiven Fehler auf MD-Datepicker

Question

Ich mache eine dynamische Liste von Daten. Der Benutzer kann alle datepickers hinzufügen, die er will, aber ich muss bestätigen, dass es keine übereinstimmenden Daten gibt, alle von ihnen müssen unterschiedlich sein, das ist die einzige Voraussetzung.

Ich habe eine benutzerdefinierte Direktive Validierung und es wird korrekt ausgelöst, aber wenn ich versuche, seine isolieren Bereich zu verwenden, bekomme ich nur diesen Fehler (Multiple Direktiven). Andere Fragen/Lösungen, die ich hier gesehen habe, schlagen vor, den Isolate-Bereich zu löschen, aber ich brauche ihn, um das Array von Daten an die Direktive zu übergeben und sie mit dem aktuell ausgewählten zu vergleichen.

Hier ist eine codepen, die das Problem reproduziert. Wenn Sie die noMatchingDates Direktive scope entfernen, verschwindet der Fehler einfach und Sie können datepickers richtig sehen und hinzufügen. Ich meine, das scope:

scope: { 
    getAllDates: "&allDates" 
} 

Ich denke, dass es mit dieser Linie in docs zu tun hat:

Mehr Richtlinien anfordernden isoliert Umfang.

Und es hat wahrscheinlich auch mit der md-datepicker zu tun, die mehr Anweisungen mit dem isolieren Bereich haben würde. Also, wie kann ich diesen Fehler lösen (und immer noch in der Lage sein, die Datumsliste zu senden)?

Wenn es nicht gelöst werden kann (behalten den Umfang) angesichts der Art der md-datepicker, wie kann ich diese dynamische Validierung erreichen? Ich denke, es könnte mit einem Controller und der ng-change gemacht werden, aber ich bin mir nicht sicher, ob es eine richtige Lösung wäre.

Answer 1

In der Tat gibt es keinen Grund für Ihre Richtlinie, einen isolierten Bereich zu verlangen. Verwenden Sie einen isolierten Bereich, wenn Ihre Anweisung wie eine wiederverwendbare "visuelle Komponente" ist. Ihre Anweisung bezieht sich auf die logische Validierung und sollte eine andere Komponente nicht verhindern.

Ihr Problem zu beheben, können Sie den isolierten Umfang und nutzen Sie Ihre Richtlinie im HTML auf diese Weise entfernen:

<div ... no-matching-dates="overtimeList"> 

Dann Funktion in Ihrem Link, können Sie den Wert dieses Attributs auf diese Weise abrufen:

var dates = scope.$parse(attr.noMatchingDates); 

Dies wird Ihnen den Inhalt geben, was zu no-matching-dates gebunden ist, so in diesem Fall ist es overtimeList zurückkehren wird.

Ich habe nie die ctrl.$parsers.unshift Syntax verwendet, aber es scheint, dass Sie es auch verwenden können, um diesen Wert abzurufen. Entfernen Sie einfach die scope.$parse Linie, die ich Ihnen und schreiben gerade gab:

ctrl.$parsers.unshift(function(arrayOfDates) { ... }) 

Dies sollte auch funktionieren. Beachten Sie, dass Sie bei der ersten Vorgehensweise $watch für Änderungen benötigen, wenn Sie die Validierung jedes Mal ausführen möchten.