在角度指令中動態加載圖像資源始終在初始加載時出錯

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}}',