1

我有一个plnkr，故事很长，但归结为我需要能够使用来自 templateCache 的图像。我尝试像这样使用ng-src来做到这一点......

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

然而，这不起作用，我得到......

copy_icon':1 获取https://run.plnkr.co/ZyTH7LFhPLhdQpCI/'img/help/copy_icon ' 400 ()

所以它不是试图从 templateCache 中获取它。有没有办法做到这一点？

更新

我试过了 ...

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

但这也不起作用

4

1 回答 1

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

顺便说一句，不建议对自定义指令名称使用ng前缀，应保留给角度核心指令/组件

于 2016-10-26T22:17:37.070 回答