Угловое Добавление на элемент из директивы make browser crash

Question

Я пытаюсь получить доступ к защищенному URL-адресу изображения, я сделал эту директиву, чтобы получить защищенное изображение, которое возвращает base64 текущего изображения. Все работает нормально. моя проблема в том, что когда запрос будет выполнен. Я получаю эту ошибку в хроме «Aw, Snap!»

<my-image src="base_url" token="token"></my-image> 



directive('myImage', ['$http' , function ($http) { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
     src: '=', 
     token: '=' 
     }, 
     link: function (scope, element, attrs) { 
     $http.get(scope.src, { 
      headers: { 
       'Authorization': 'Bearer ' + scope.token 
      } 
     }) .success(function (data) { 
      scope.$watch('myImage', function() { 
       element.append('<img src="'+data+ '" />'); 
      }); 
     }).error(function (data) { 

     }); 
     } 
    } 
}]); 


app.controller("myController", ["$scope", 
    function ($scope) 
    { 
     $scope.base_url = "api.securedsite.com/image/img.png"; 
    }); 

Answer 1

Прежде всего, чтобы очистить это немного, вам не нужно назначить переменную области действия атрибутов затем передать их через изолированную сферу к вашей директиве. У вас уже будет доступ к тем же переменным. Однако ошибка заключается в попытке поставить часы на вашу директиву. Это то, что разрушает хром.

HTML:

<my-image></my-image> 

ЯШ:

directive('myImage', ['$http' , function ($http) { 
    return { 
    restrict: 'E', 
    replace: true, 
    link: function (scope, element, attrs) { 
     $http.get(scope.base_url, { 
      headers: { 
      'Authorization': 'Bearer ' + scope.token 
      } 
     }).success(function (data) { 
      element.append('<img src="'+data+ '" />'); 
     }).error(function (data) { 
     }); 
    } 
    } 
}]);