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

为什么不尝试jQuery？绑定知道加载图像，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>

Answer 2

由于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";
    });
};

控制器 - 语法让我困惑了一会儿，但是没有理由不在这里使用好的$scope。

数据未通过img.onload（）出现在模板中

2 个答案: