web-dev-qa-db-ja.com

AngularJS-ngスタイルはcssバックグラウンドプロパティを更新しません

画像URLを返すサービスがあり、次のコードを使用して呼び出されます。

angular.forEach(results, function (item) {
     item.img = "/images/searchItem.jpg";
     $http.post("https://my.api.com/?id=" + item.id).success(
           function (url) {
               item.img = url;
           });
});

私の見解では、ng-src属性を持つ画像を使用していましたが、それは次のように完全に機能しました：

<img  ng-src="{{item.img}}">

次に、代わりにSPANでbackground-imageを使用することにしました。

<span ng-style="{'background':'transparent url({{item.img}})'}"></span>

現在、フローは最初の実行時にのみ機能し、その後（コンソールで）次のhtmlを見ることができます

<span ng-style="{'background':'transparent url(http://expertsimages.liveperson.com/images/rating/rate10.gif)'}" style="background-image: url(https://fb.lp-chat.com/images/searchItem.jpg); background-color: transparent; background-position: initial initial; background-repeat: initial initial;"></span>

これは変数が更新されたことを示しますが、htmlはまだ初期状態のままです。

成功した後にapply/digestを呼び出そうとしましたが、エラー$ digestがすでに進行中です（これは理にかなっています）。重要なのは、通常のダイジェスト（他のUIの変更など）の後、スタイルが適用され、正しい画像が表示されることです。

ここで何が欠けていますか？

更新：作成しました JS fiddle この問題を示しています... angularのバグのように見えます。

javascripthtmlcssangularjsweb
46
Shlomi Schwartz

私もこれに遭遇しました。 _{{ }}_で評価する代わりに、文字列+値の連結を使用します。

これは動作します：

<span ng-style="{'background':'transparent url(' + item.img + ')'}"></span>)

fiddle の作業バージョンです

86
cleversprocket

angularは単一括弧の内容を一度だけ評価し、その文字列内でバインドしたい変数を見つけられないため、機能しません。

ただし、次のような独自のディレクティブを作成できます。

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background': 'transparent url(' + value +')'
            });
        });
    };
});

次に、テンプレートで次のように使用します。

<div ng-if="vis" class="container" back-img="{{imgSrc}}"></div>

あなたのフィドルを更新しましたが、うまくいくようです http://jsfiddle.net/dS4pB/3/

12
GillesC

現在スコープ変数を更新している場合、$timeout呼び出しでこれをラップして、更新をスコープとその後のビューにプッシュします。これにより、次のdigestへの更新が効果的にバンプされますダイジェストはすでに進行中競合：

    $timeout(function(){
        $scope.var = value;
    });

この質問スレッド は、apply vs timeoutなどに関する有用な情報を提供します。

6
SW4

おそらく、私が最近直面し、ng-bindを使用して解決したのと同じ問題に直面しているでしょう。

この質問で説明されている答えを確認してください：

AngularJS：角度でng-bindが{{}}よりも優れているのはなぜですか？

ng-bindを使用すると、innerhtmlが適切に更新されます。

1
user429035