AngularJS：非標準属性でのng-srcの動作？

Question

"Video For Everybody"ジェネレータを使用してアプリ内のメディアプレーヤーを統合しています。ブラウザがHTML5 videoとaudioをサポートしていない場合、プレーヤーはparamの属性を持つobject要素をビデオとプレースホルダ（画像）ソースで構築する必要があります。むしろ、その後

私は時間内に解決されていない表現の古典問題に遭遇予想したように、私のブラウザはmy.media.com/{{video.src}}に要求を送信my.media.com/somevideo.mp4

は、残念ながら、私は同じに直面しているいくつかの属性（poster, flashvars, placeholder数名にする）があります問題。 ng-srcまたはng-hrefディレクティブと同じ動作を作成するにはどうすればよいですか？私は関連するソースコードを探してみましたが、見つかりませんでした。ここでは、ビルドインディレクティブのソースは公式APIドキュメントに簡単に作られて見つける問題のHTMLを展示スニペット、

<video controls="controls" poster="{{mediaModel.mediaFile2}}" width="300" height="150"> 
<source ng-src="{{mediaModel.mediaFile}}" type="{{mediaModel.contentType}}" /> 
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="300" height="150"> 
    <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
    <param name="allowFullScreen" value="true" /> 
    <param name="wmode" value="transparent" /> 
    <param name="flashVars" value="{{'controllerbar=over&amp;image=' + media.mediaFile2 + '&amp;file=' + mediaModel.mediaFile}}" /> 
    <img ng-src="{{mediaModel.mediaFile2}}" width="300" height="150" title="{{mediaModel.uploadedTime}}" /> 
</object> 

Answer 1

です。この場合、ngSrcのドキュメントに移動し、ページの上部に「このドキュメントを改善する」と「ソースを表示」の2つのボタンが表示され、「ソースを表示」をクリックすると、自動的に正しいソースファイルに移動しますディレクティブが定義されています。これはすべてのビルドイン指令全体で機能し、とても便利です！私はそれが99の優先順位を持つディレクティブは後を実行することを意味し、次にコメントをもとに、興味深いことに、全く複雑で見えない、決定的なラインがpriority: 99であるように思わngSrc、ためのコードを貼り付けています以下は

属性が補間されています。

// ng-src, ng-srcset, ng-href are interpolated 
forEach(['src', 'srcset', 'href'], function(attrName) { 
    var normalized = directiveNormalize('ng-' + attrName); 
    ngAttributeAliasDirectives[normalized] = function() { 
    return { 
     priority: 99, // it needs to run after the attributes are interpolated 
     link: function(scope, element, attr) { 
     attr.$observe(normalized, function(value) { 
      if (!value) 
      return; 

      attr.$set(attrName, value); 

      // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist 
      // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need 
      // to set the property as well to achieve the desired effect. 
      // we use attr[attrName] value since $set can sanitize the url. 
      if (msie) element.prop(attrName, attr[attrName]); 
     }); 
     } 
    }; 
    }; 
}); 

上記を考慮すると、独自の指令を実装するのは簡単です。

Answer 2

したがって、最も一般的で、保守可能で、構成可能で再利用可能なソリューションは、それを処理するカスタムディレクティブを作成することです。

この-->PLNKR<--を見ると、そこには実質的にすべてが必要です。あなたはそれを少し弱めるだけです。

どのように動作するのですか：設定オブジェクトを渡す指示（追加の属性を作成するだけのオブジェクトが必要な場合）。この要素はreadyかnotの2つの状態にあります。 は、すべての成分が収集されたかどうかを示しています。もしngSwitchがvideoPlayerテンプレートをロードし、そこにすべての情報があるので、不要なリクエストは送信されません。

Answer 3

ng-attr-poster、またはより一般的にはng-attr-whateverを使用できるようになりました。

Answer 4

videoタグのposter属性で同様の問題が発生しました。属性srcを持つ要素にng-cloakを適用すると、クロークが削除されて表示されるまで何も読み込まれません。