Проблема с загрузкой изображения в пользовательской директиве

Question

Я хочу, чтобы URL-адрес изображения был получен с сервера в моей настраиваемой директиве. Директива используется для создания холста.

Кажется, что директива загружена и URL-адрес изображения не определен. Поскольку требуется время, чтобы получить URL-адрес со стороны сервера.

Или, может быть, как я получил $rootScope данные в моей функции ссылки.

Edit:

Ниже директива:

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, так как вы получаете 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>