2

angularjs に問題があり、調査の後でさえ、どこが間違っているのかを見つけることができませんでした。

要素の css 値「左」を再計算する必要があります。「ng-style」ディレクティブと、css 値を持つオブジェクトを返すメソッドを使用しています。それは - 私の知る限り - 私がしなければならないことです。しかし、値を更新しても、スタイルは更新されません。

ng バインドの使用法:

<div ng-style="getCssShiftObject()">

オブジェクトを作成するメソッド

$scope.getCssShiftObject =function(){
   return {'left':this.cssShift+'px'};
};

オブジェクトを変更するメソッド

 $scope.nextPosition = function(){
     if((this.currentPosition+1) <= this.maxPosition){
        this.currentPosition = this.currentPosition+1;
        this.cssShift = (this.currentPosition*this.slideSize)*-1;
    }
    return this.currentPosition;
 };

そのように使用すると、コンテンツの別の場所で更新されます。

{{getCssShiftObject()}}

お時間をいただきありがとうございます。

4

3 に答える 3

5

同様の問題に遭遇しました。ngStyle を使用して背景画像をロードしようとしましたが、式の変数がすぐに利用できない場合 (リソースの約束の一部である場合など)、機能しません。

これに対処するために、この問題に対処する独自の ngStyle ディレクティブを作成しました。この方法で ngStyle を使用するすべてのシナリオに対して関数を作成するよりも、これが優れていることを願っています。

app.directive("myStyle", function (){
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            var el   = element[0],
                attr = el.getAttribute('style');

            el.setAttribute('style', attr);

            // We need to watch for changes in the style in case required data is not yet ready when compiling
            attrs.$observe('style', function (){
                attr = el.getAttribute('style');

                if(attr)
                {
                    el.setAttribute('style', attr);
                }
            });
        }
    };
});

次に、次のように使用できます。

<a my-style style="background-image: url('{{promise.myImage}}')"></a>
于 2014-03-31T01:56:17.743 に答える
1

スタイル属性にも同様の問題がありました。一部のブラウザ、特に IE でバインドが機能しませんでした。ng-attr-style ="{{yourBindingExpression}}"を使用して解決しました。

https://docs.angularjs.org/guide/interpolationで ng-attr 補間の詳細を読む

于 2016-04-12T19:50:42.063 に答える