自定义指令中的图像加载问题

Question

我希望在我的自定义指令中从服务器端收到图像 URL。该指令用于创建 canvas.

似乎指令已加载，图像 URL 未定义。因为从服务器端获取 URL 需要时间。

或者我是如何在指令 link 函数中获取 $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。

我该怎么做？

Answer 1

您需要使用 $watch，因为您正在从异步 AJAX 调用中获取 src：

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>

自定义指令中的图像加载问题

Image loading issue in custom directive

canvas

angularjs

angularjs-directive

angularjs-rootscope