web-dev-qa-db-ja.com

AngularJS ng-srcを理解する

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

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

次のJSの場合：

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

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

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

私の状況を示す例については、 jsfiddle をご覧ください。

おかげで、

マルティン

angularjsdirective
30
Martijn

パス全体を$ 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);
};

[〜＃〜] fiddle [〜＃〜]

38
Stewie

例による情報

これを取りましょう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。

3
Skid Kadda

私も同じ問題にぶつかりました。私が気づいた1つのことは、ng-srcの値が未定義の場合、imgはフェッチされないということです。したがって、2つの引数を連結し、両方の引数が定義されている場合にのみ値を返すユーティリティメソッドを作成しました。下記参照。

<div ng-controller="MyCtrl">
  <img ng-src="{{MyUtil.strConcat('http://localhost:8081/media/', path)}}" />
</div>

myApp.factory('MyUtil', function() {
    return {
        strConcat: function(str1, str2) {
            return (angular.isDefined(str1) && angular.isDefined(str2)) ? 
                (str1 + str2) : undefined;
        }
    }
});

function MyCtrl($scope, $timeout, MyUtil) {
    $scope.MyUtil = MyUtil;
...
}

[〜＃〜] fiddle [〜＃〜]

2
Amir

データがまだ入力されていない場合は、ng-srcを空の文字列に設定できます。

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

pathが初期化されていない場合、条件は短絡してor部分に移動し、data-ng-srcを''（空の文字列）に設定します。サーバ。

0
kumarharsh

最新では、次のように評価できます。

ng-src="{{ methodThatReturnsString() }}"
0
Jon O'Donnell