從編譯到函數完成的延遲角度指令模板

Question

我有一個在我的頁面上顯示圖像的角度指令。然而，這種圖像是由值查詢字符串的URL確定：

app.directive('myDirective', function(myService) { 
    return { 
     restrict: 'A', 
     replace: true, 
     scope: true, 
     link: function($scope, element, attrs) { 

      var myImage = myService.getParam(); 

      if (myImage == AA3) { 
       $scope.myImage = 'YAHOO'; 
      } 
      else { 
       $scope.myImage = 'capitalone'; 
      } 

     }, 
     template : '<img src="/resources/{{myImage}}.png" />' 
    }; 
}); 

上述的問題是，我可以看到2個HTTP請求：

1. http://www.mydom.net/resources/{{myImage}}.png 
2. http://www.mydom.net/resources/YAHOO.png 

我怎樣才能延緩編譯的模板，直到myImage包含一個值？

Answer 1

ng-src應該做的伎倆的~~

template : '<img ng-src="/resources/{{myImage}}.png" />'

Answer 2

使用ng-src代替src。

<img ng-src="/resources/{{myImage}}.png" /> 

Answer 3

使用NG-SRC代替SRC

template : '<img ng-src="/resources/{{myImage}}.png" />'