Angular.js und Fabric.js: Fabric-Canvas ändert das Verhalten, sobald Code in eine Angular-Direktive verschoben wird

8

Ich habe eine einfache AngularJS / FabricJs-Anwendung. Die Absicht ist, ein Bild vor dem Hochladen zu verschieben / zu vergrößern. Im Wesentlichen vier Schritte:

%Vor%

Das Problem tritt auf, wenn ich den Code von einem direkt eingebetteten Formular in eine eckige Direktive verschiebe. Sobald ich das Formular in die Direktive verschoben habe, tauchte ein Problem auf, das Bild wird geladen und ohne irgendwelche offensichtlichen Probleme in die Leinwand eingefügt. Wenn Sie jedoch an einer beliebigen Stelle auf der Zeichenfläche klicken (z. B. um das Bild zu verschieben), wird das hinzugefügte Bild nicht mehr auf der Zeichenfläche angezeigt (obwohl die Überprüfung des canvas-Objekts des Fabric es immer noch innerhalb seines Objektarrays anzeigt) / p>

Die JS App und der Helfer:

%Vor%

Controller:

%Vor%

Der Richtliniencode:

%Vor%

wo die TemplateUrl auf dieses Formular verweist

%Vor%

Hoffentlich hilft das JsFidel unten Leuten, zu verstehen, worüber ich spreche. Vielen Dank im Voraus!

Um zu reproduzieren

%Vor%

Arbeiten (Bild kann verschoben werden) (ohne Anweisung):

Ссылка

Broken / Issues (Bild verschwindet beim Verschieben) (mit Direktive):

Ссылка

    
akaphenom 08.09.2013, 15:32
quelle

1 Antwort

6

Entfernen Sie den ng-controller="ImageCtrl" aus Ihrer Vorlage, es erstellt einen anderen $ scope und eine Instanz des Controllers, und das bricht es.

%Vor%     
Brian 09.09.2013, 21:12
quelle