Scope-Variable und ng-include in Angular harmonieren nicht
Ich habe eine Datei-Dropzone, um den Dateninhalt einer Datei zu erhalten.
Wenn ich $scope.importData auf null setze, ist es nicht mehr möglich, Daten innerhalb des Drop-Handlers zuzuordnen.
Ich habe herausgefunden, dass das Problem das ng-include sein könnte. Wenn ich es ohne das Include mache, wird es funktionieren.
Bitte versuchen Sie den Plunker ...
1 Antwort
ngInclude erstellt einen neuen Bereich, der prototypisch von seinem übergeordneten Bereich erbt, in Ihrem Fallbeispiel ist der übergeordnete Bereich der Bereich von pageCtrl . Das Problem mit Ihrem Beispiel ist, dass in $scope.addSetReImport Sie var $scope = this; setzen und in diesem Kontext this sich auf den Bereich von ngInclude und nicht auf den pageCtrl Bereich bezieht, also überschreibt $scope.importData = null; effektiv den Prototyp importData mit a Eigenschaft des ngInclude-Bereichs. Der folgende Screenshot der Chrome-Konsole veranschaulicht diese Überschreibung, die aus $ scope von ngInclude stammt:
Sie haben also zwei importData -Variablen, eine auf Ihrem ngInclude-Bereich und innerhalb Ihrer modalen Vorlage, die auf null zeigt, und eine zweite, die auf Ihrem pageCtrl -Bereich liegt, der während der handleDrop -Funktion. Da handleDrop den importData im Bereich pageCtrl aktualisiert, spiegelt es nicht die Eigenschaft wider, die im ngInclude-Bereich festgelegt ist, den Ihre Vorlage verwendet.
Damit Ihr Beispiel funktioniert, entfernen Sie einfach var $scope = this; aus der Funktion addSetReImport , um sicherzustellen, dass Sie auf den Bereich von pageCtrl verweisen. Hier ist ein geklonter Plocker mit einem funktionierenden Beispiel: Ссылка
Tags und Links javascript angularjs