Angularjs: zu viel Rekursion Fehler auf benutzerdefinierte Direktive

Question

Ich weiß nicht, ob ich darüber sorgen sollte, habe ich eine benutzerdefinierte Anweisung, die ein Klick-Ereignis auf eine input[type="file"] klickt, wenn ein div geklickt wird, jedes Mal, wenn eine Datei gewählt wird oder der Dateiauswahldialog wird geschlossen, der Fehler wird in der Konsole angezeigt.

directive.js

module.directive("cropper", function(){ 
    return { 
     restrict: "E", 
     replace: true, 
     templateUrl: "components/cropper/cropper-directive.html", 
     link: link 
    }; 

    function link(scope, element, attr){ 
     var selector = element[0].querySelector(".cropper-selector"); 
     var input = element[0].querySelector(`input[type="file"]`); 

     // Trigger file input select when selector detects a click 
     selector.addEventListener("click", function(evt){ 
      var clickEvent = new MouseEvent("click", { 
       bubbles: true, 
       canceable: true 
      }, false); 

      input.dispatchEvent(clickEvent); 
     }); 
    } 
}); 

directive.html

<div class="cropper"> 
    <div class="cropper-image"> 
     <div class="cropper-selector"> 
      <label class="centered">Click or drop an image on this block</label> 
      <input type="file"></input> 
     </div> 
    </div> 

    <div class="cropper-actions"></div> 
</div> 

i nach Lösungen gesucht haben, aber all die Bedrohungen ich nur gemacht auf jQuery gefunden haben und wie Sie sehen können, ich bin Mit den nativen Event-Listener von Javascript, wenn dies etwas ist, worüber ich mich sorgen sollte, würde ich gerne die Lösung ohne jQuery Methode

kennen 10

UPDATE: Ich habe vergessen zu erwähnen, dass input hat display: none so wäre es die Komponente aussehen wie ein ziehbar Drop machen Dateien

Answer 1

selector.addEventListener("click", function(evt){ 
    var clickEvent = new MouseEvent("click", { 
     bubbles: true, //<---- 
     canceable: true 
    }, false); 

    input.dispatchEvent(clickEvent); 
}); 

Ihr click Ereignis Blasen zu .cropper-selector und löst dort eine andere click Ereignis weicht verursacht eine andere input.dispatchEvent(clickEvent); weichen wieder sprudelt, und so weiter und so fort.

Wissen Sie, dass, wenn Sie Ihr Markup wie folgt einstellen, Sie die ganze Funktion link() loswerden können und alles, was es tut?

<label class="cropper-selector"> 
    <div class="centered">Click or drop an image on this block</div> 
    <input type="file"></input> 
</label> 

Answer 2

Try this:

Option 1: Änderung html leicht

<div class="cropper-image"> 
     <div class="cropper-selector"> 
      <label class="centered">Click or drop an image on this block</label> 
     </div> 
     <!--new div--> 
     <div> 
      <input type="file"></input> 
     </div> 
    </div> 

Option 2: Änderungen an Ihrem Skript

selector.addEventListener("click", function(evt){ 
     var clickEvent = new MouseEvent("click", { 
      bubbles: true, 
      canceable: true 
     }, false); 

     input.dispatchEvent(clickEvent); 
     event.stopPropagation(); //**add this line** 
    }); 

Lassen Sie mich wissen, ob das funktioniert.