在角度指令中动态加载图像资源始终在初始加载时出错

Question

我有一个指令，用于将3位ISO-3316国家/地区代码转换为标志和国家/地区名称。我用它像这样：

<country-with-flag data="840"> 

我的指令是这样的：

.directive('countryWithFlag', ['countryCodes', function(countryCodes) { 
    return { 
     scope: { 
      data: '=' 
     }, 
     restrict: 'E', 
     template: '<img src="assets/images/flags/{{data | numericToAlphaCode}}.png"> {{data | numericToCountry}}', 
    } 
}]) 

numericToAlphaCode是将转换840为3316-α-2码是在这种情况下"US"的过滤器。

该指令的结果是：

这完美的作品，除了当页面加载我在控制台错误之前的角度表达转换成有用的东西：

为什么会发生这种情况，以及如何避免生成此错误？我认为我需要在link中做点什么，但是我对于如何工作有点困惑，尤其是因为在调用link之前发生错误。

Answer 1

尝试使用ng-src，应该防止资产的加载，直到串插

template: '<img ng-src="assets/images/flags/{{data | numericToAlphaCode}}.png"> {{data | numericToCountry}}',