数据未通过 img.onload() 出现在模板中

Question

编辑：以下示例没有做任何有用的工作。这只是为了说明我在img.onload 中设置模板变量的问题。实际的图像处理无关紧要。

所以我正在尝试按照this 答案中的建议将图像转换为base64，然后将其调整为在角度项目中使用。

我可以将图像编码为 base64，但我无法让该数据出现在模板中。

在我的控制器中，我有以下内容：

vm.showInTemplate = "cluck";
var img = new Image();
img.src = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
img.onload = function(){
    // logic removed for simplicity
    vm.showInTemplate= "moooo";
};

然后在视图中，我有（现在）：

{{ vm.showInTemplate }}

我从 Chrome 控制台知道vm.showInTemplate 在img.onload() 中可用，并且我知道它被设置为"moooo"，但在模板视图中，该值仍然是"cluck"

我做错了什么？

Answer 1

感谢progysm，答案很明显。把它贴在这里为后代节省一点时间：

var url = 'http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png';
var img = new Image();
vm.showInTemplate= 'oink';
img.src = url;
img.onload = function(){
    $scope.$apply(function(){
        vm.showInTemplate = "mooo";
    });
};

controller-as 语法让我困惑了一会儿，但没有理由不在这里使用好的 ol'$scope。

Answer 2

为什么不试试 jQuery？ bind 知道加载图片、iframe 等对象。看一个例子：

$(document).ready(function() {
	$('img#example').bind('load', function() { 
		console.log('load done'); 
	});
	$('button#load').click(function() { 
		$('img#example').attr('src','http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png');
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="example" src="">
<button id="load">EXAMPLE</button>