Как загрузить изображение из $ templateCache с помощью Angular 1

Question

У меня есть plnkr, и история длинная, но дело доходит до того, что мне нужно иметь возможность использовать изображение из шаблонаCache. Я пытаюсь сделать это с помощью нг-Src, как это ...

$templateCache.put('img/help/copy_icon', '://www.drupal.org/files/issues/sample_7.png') 
... 
template: '<img ng-src="{{url}}">' 

Однако это не работает, и я получаю ...

copy_icon ': 1 GET https://run.plnkr.co/ZyTH7LFhPLhdQpCI/' IMG/помощь/copy_icon '400()

Так что это не попытка получить его из templateCache. Есть ли способ сделать это?

Update

Я пытался ...

$http.get('://www.drupal.org/files/issues/sample_7.png').success(function (t) { 
    $templateCache.put('img/help/copy_icon', t); 
}); 

Но это не сработало

Answer 1

Я не знаю точно, что вы пытаетесь достичь с помощью $ templateCache, который в вашем случае просто сохраняет URL-адрес изображения в кеш, но я немного изменил ваш код, поэтому он отображает изображение, я добавил контроллер:

app.run(function($templateCache){ 
    $templateCache.put('img/help/copy_icon', 'http://www.drupal.org/files/issues/sample_7.png') 
}) 

app.directive('ngImg', function(){ 
    return { 
    rectrict: "E", 
    scope: { 
     url: "@url" 
    }, 
    template: '<img ng-src="{{ imgUrl }}">', 
    controller: function ($scope, $templateCache) { 
     $scope.imgUrl = $templateCache.get($scope.url); 
    } 
    } 
}) 

plunker: https://plnkr.co/edit/q5a9ptq8rd1G4uGkkNMe?p=preview

BTW, используя нг префикса для имен пользовательских директив не рекомендуются и должны быть зарезервирован для угловых основных директив/компонентов