AngularJS范围没有注意到变化[重复]

Question

我有一个$scope 字段，用于<img>: 中的ng-src 属性

$scope.imageDataUrl

字段初始化如下：

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

这里是外部JS函数：

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

这是一种复杂的方式，但第三方应用程序迫使我这样做。 我遇到的问题是，不知何故，角度没有注意到字段imageDataUrl 的变化。所以图像没有更新。 我什至为该字段尝试了$scope.$watch，但它没有被触发。 有趣的是，当我在浏览器中滚动或单击任意位置（以及$scope.$watch）时，它会发生变化。

为什么 Angular 无法识别字段变化，我需要做什么才能让它起作用？

Answer 1

如果是第三方库正在更新您的 $scope，要让 angular context 了解您的更改，您需要调用 $scope.$apply()

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

在您的回调中

见docs

$apply() 用于从外部执行 AngularJS 中的表达式 AngularJS 框架。 （例如来自浏览器 DOM 事件， setTimeout、XHR 或第三方库）。因为我们正在呼唤 我们需要执行适当的范围生命周期的 AngularJS 框架 异常处理，执行手表。