CDNを使用して<img>タグ

Question

私はちょうど私のウェブサイトの読み込みを高速にするCDNサービスを追加しました。 <img>タグを使用して取得された写真に関する質問があります。

私はこのような多くの場合があります。

// userProfile.thumbnailPhotoSrc = some/relative/path.png  
ng-src="{{userProfile.thumbnailPhotoSrc}}" 

を（私はAngularJSを使用）。

起動時に、CDNエンドポイントを変数window.cdnに保存するスクリプトがあります。スクリプトの場合は、利用可能なエンドポイントがありませんことを決定：

window.cdn = ''; 

だから私はのような何かをできるようにしたい：

ng-src="window.cdn + {{userProfile.thumbnailPhotoSrc}" 

しかしwindow.cdnが評価されていないとして、これは、不可能です。しかし、どちらもこれが作業していない：

ng-src="{{window.cdn + userProfile.thumbnailPhotoSrc}" 

私は{{}}下$scopeプロパティをのみにアクセスすることができますので。 CDNエンドポイントを$scopeに保存することはできません。なぜなら、すべてのコントローラには$scopeが存在するからです（私は多く持っていますが、これは保守できません）。

最後に考えたのは、ng-srcだと、ng-src属性で実行される変換関数を追加していますが、その方法を見つけることができませんでした。

私は何をお勧めしますか？私は、ウェブサイトがCDNから写真を取得し、CDN機能不全の場合に元のサーバーにフォールバックして（相対パスを取得する）ようにしたいと考えています。どうすればその行動を得ることができますか？

おかげ

Answer 1

あなたは角度

でcustom filterあなたは、あなたのテンプレートで、その後必要があります作成することができます。

ng-src="{{userProfile.thumbnailPhotoSrc | cdn}" 

あなたは、フィルタサービスへの依存関係として$windowサービスを追加することができますので、グローバルオブジェクトから取り出す必要はなく、フィルタもテストできます。

Answer 2

<img>タグのsrcをすべて更新しようとしている場合。指示文を作成することができます：

angular.module('imageCdnSrc', []) 
.directive('img',['$interpolate', function($interpolate) { 
    return { 
    restrict: 'E', 
    scope: false, 
    compile: function(element, attrs) { 
     var ngSrc = attrs.ngSrc; 
     delete attrs.ngSrc; // prevent ngSrc directive to trigger 

     return function($scope,element,attrs) { 
     var ngSrcVal = $interpolate(ngSrc)($scope); //returns the string value of ngSrc 

     /* Add Logic Below to decide what to do */ 
     if(window.cdn && ngSrcVal && ngSrcVal.length>0){ 
      attrs.ngSrc = window.cdn + ngSrcVal; 
      /* if image fails to load with cdn, load the default */ 
      element.one('error', function() { 
      angular.element(this).attr("src", ngSrcVal); 
      }); 
     } 
     else{ 
      attrs.ngSrc = ngSrcVal; 
     } 
     };  
    } 
    }; 
}]);