我希望在我的自定义指令中从服务器端收到图像 URL。
该指令用于创建 Canvas 。
似乎指令已加载且图像 URL 未定义。因为从服务器端获取 URL 需要时间。
或者我是怎么得到的$rootScope
我的指令链接函数中的数据。
编辑:
以下是指令:
app.directive('logocanvasdirective',['$rootScope','$templateRequest','$compile', function($rootScope,$templateRequest,$compile) {
return {
template: "<canvas id='logo' width='500' height='500'/>",
scope: true,
link: function($scope, element, attrs) {
var canvas1 = document.getElementById('logo'),
context1 = canvas1.getContext('2d');
make_base1();
function make_base1()
{
base_image1 = new Image();
base_image1.src =scope.variable; //How do I use this?
base_image1.onload = function() {
context1.drawImage(base_image1, 0, 0);
}
}
}
};
}]);
我想要
image.src = $scope.variable
这是从我的 Controller 中的服务器端接收的。我怎么做 ?
最佳答案
您需要使用 $watch
因为您收到了 src
来自异步 AJAX 调用:
app.directive('logocanvasdirective',['$rootScope','$templateRequest','$compile', function($rootScope,$templateRequest,$compile) {
return {
template: "<canvas id='logo' width='500' height='500'/>",
scope: {
imgSrc: '='
},
link: function($scope, element, attrs) {
var canvas1 = document.getElementById('logo'),
context1 = canvas1.getContext('2d');
make_base1();
function make_base1()
{
base_image1 = new Image();
base_image1.src = scope.imgSrc;
base_image1.onload = function() {
context1.drawImage(base_image1, 0, 0);
}
}
scope.$watch('imgSrc', function(newValue) {
if (newValue) {
make_base1();
}
});
}
};
}]);
并通过
$scope.variable
到您的指令: <logocanvasdirective img-src="variable" />
或者
<div logocanvasdirective img-src="variable"></div>
关于angularjs - 自定义指令中的图像加载问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35334439/