31

hereで説明されているように、AngularJS ディレクティブ ng-src は、ハンドルバーが解析される前にブラウザーがリソース (画像など) をロードするのを防ぐために使用されます。現在、次のコードを使用しています。

<div ng-controller="MyCtrl">
  <img ng-src="http://localhost:8081/media/{{ path }}" />
</div>

次の JavaScript を使用します。

function MyCtrl($scope, $timeout) {
    $timeout(function () {
        $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
    }, 1000);
};

パスは Web サービスから取得されています。この遅延のため、ブラウザーは を読み込もうとしhttp://localhost:8081/media/、404 が発生します。パスが取得されると、ブラウザーは正しい要求を発行し、画像を読み込みます。

すべてのデータの準備が整うまでリソースをロードしないようにするための推奨される方法は何ですか?

私の状況を示す例については、 jsfiddleを参照してください。

4

6 に答える 6

39

パス全体を $scope 変数に入れます。その方法ng-srcは、イメージへの完全に解決されたパスを提供するまで待機します。

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

function MyCtrl($scope, $timeout) {
    var path = 'https://si0.twimg.com/profile_images/';
    $timeout(function () {
        $scope.path = path + '2149314222/square.png';
    }, 1000);
};

フィドル

于 2013-08-14T15:01:09.260 に答える
3

例による情報

これを取りましょうblogitem directive。上記の例は、デフォルト値を設定する方法をすでに示しています。

HTML :

<blogitem ng-repeat="item in items" 
          bg-src="{{ item.image }}" 
          caption="{{ item.title }}"/>

JS:

.directive( 'blogitem', function()
{
    return {
        restrict    : 'E',
        templateUrl : 'js/app/directives/blogitem.html',
        replace     : true,
        // pass these two names from attrs into the template scope
        scope       : {
            intro : '@',
            bgSrc : '@'
        }
    }
} )

HTML テンプレート :

<article>
    <img ng-src="{{ bgSrc }}"/>
    <p>{{ intro }}</p>
</article>

をご理解の上、お役立ていただければ幸いng-srcです。

于 2014-02-24T13:50:55.287 に答える