AngularJS Umfang nicht bemerkt Änderung

Question

Ich habe ein $scope Feld, das ich für ein ng-src Attribut in einem <img>:

$scope.imageDataUrl 

Das Feld wie folgt initialisiert:

$scope.myJsWrapper = new MyJsWrapper(); 
$scope.myJsWrapper.getImageUrl(function (imageDataUrl) { 
    $scope.imageDataUrl = imageDataUrl; 
}); 

hier die externe JS-Funktion :

function MyJsWrapper() { 
    this.getImageUrl = function (withImage) { 
     thirdPartyJsFile.getData().then(function (data) { 
      var imageDataUrl = thirdPartyJsFile.getDataUrl(data, "image/png"); 
      if (withImage) { 
       withImage(imageDataUrl); 
      } 
     }); 
    } 
} 

Es ist ein komplizierter Weg, aber die thi Rd Party App zwingt mich, es so zu machen. Das Problem, das ich habe, ist, dass eckig nicht die Änderung des Feldes imageDataUrl bemerkt. Das Bild wird also nicht aktualisiert. Ich versuchte sogar $scope.$watch für dieses Feld, aber es wurde nicht ausgelöst. Lustig genug es ändert sich, wenn ich im Browser blättern oder irgendwo klicken (auch die $scope.$watch).

Warum erkennt eckig den Feldwechsel nicht und was muss ich tun, damit es funktioniert?

Answer 1

wenn es sich um eine thirdy Party-Bibliothek, die Ihre $scope aktualisiert, Winkel Kontext bewusst Ihre Änderung informiert werden, können Sie $scope.$apply()

$scope.$apply(function() { 
    $scope.imageDataUrl = imageDataUrl; 
}); 

in Ihrem Rückruf

Siehe docs

anrufen müssen

$apply() wird verwendet, um einen Ausdruck in AngularJS von außerhalb des An auszuführen gularJS Rahmen. (Zum Beispiel aus Browser-DOM-Ereignissen, setTimeout, XHR oder Bibliotheken von Drittanbietern). Da wir das AngularJS-Framework in aufrufen, müssen wir den richtigen Scope-Lebenszyklus von Exception Handling, Ausführen von Uhren durchführen.