値のバインディングを変更するとAngularJSがトリガーされます。

Question

ng-html-bind-unsafeによってコンテンツがバインドされている指示があります。私は、コンテンツが変わったときに移行するのが好きです。私はjqueryを使ってフェードアウトし、コンテンツの値を変更し、再びフェードインすることができます。

AngularJSではより洗練された方法がありますか？

Answer 1

角度1.2.0では、コンテンツの変更を監視し、追加してクラスを削除するディレクティブを使用できます。探しているフェード効果をトリガするクラスの追加と削除にアニメーションを結びつけることができます。データバインド中にテキストを強調しようとしたとき、私は同様の問題に遭遇したhttp://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Answer 2

：

module.directive('contentChange', function(){ 

return { 

    scope: { 
    content: '=' 
    }, 

    template: '<span ng-bind-html="myContent"></span>', 

    link: function(scope, element, attrs){ 
    scope.$watch('content', function(){ 

    //add fader class to element 

    scope.myContent = content; 

    //remove fader class from element 
    }); 
    }; 
}); 

ここでは1.2アニメーションの人気の記事です。私の目標は、より洗練されたUIのために変更されているテキストを強調表示することです。 UIの観点からは、フォームを記入している間に変更されていることをユーザーが知っていることが保証されます。

は、ここで私は（私は以下fiddle添付）

まず、あなたが時計を使用しないを学んだのです。これは、ng-classに対してtrue :: falseの不愉快なサイクルを作成するため、クリーンな遷移を出力しません。

次に、は、要素を見つけて変更するjqueryとは考えられません。角度の鍵は、私の最初の試みが深刻に欠けている再利用性です。

ng-focus、ng-blur、ng-click、（...など）などのイベントは、私が望む結果を得るためのパンとバターです。

私のソリューションは、入力は、私が強調関数を呼び出すと「名前」と呼ばれる引数を通過していますngのフォーカス時には

<input ng-focus="highlight('name')" ng-blur="doneHighlight('name')" 
ng-model="user.name" /> 

を編集していたときを検出するためにNG-焦点とNG-ブラーを使用することです。この議論は再利用の鍵です。

$scope.highlight = function(className){ 
    $scope.toggle = className; 
} 

一度通過すると、toggleは引数と同じになります。

ここでキッカーだ...

<div ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}"> 
    {{user.name}} 
</div> 

トグルは、「noToggle」クラスが印加される偽の「name」+に==ているときにハイライトが適用されて渡された引数に==された場合滑らかな非ハイライトアニメーション。

待ち時間...何がng-blur？私はあなたに尋ねられてうれしいです！ ng-blurは 'doneHighlight'関数を呼び出し、同じクラス引数を渡します。

$scope.doneHighlight = function(className){ 
    $scope.toggle = className + false; 
} 

しかし、引数を渡すときには、クラス名の最後にも偽の値が付加されます。これはjQueryの考え方とは異なりますが、コントローラ内の関数を必要な数だけ再利用することができます。

これが役に立った！それ以上の質問には満足しています。

http://jsfiddle.net/bebold/8MAKT/1

Answer 3

私はngAnimate含め以外の新しいJSのコードが含まれていない良い方法があると思います。

この例を見てみましょう：

<span class="my-example value-{{myValue}}">{{myValue}}</span> 

値を使用するクラスを設定することで、私はクラスの変更のためのngAnimate能力を使用していますすることができます。私SCSSで

（またはLESS）私が書くでしょう：

span.my-example{ 
    display: inline-block; 
    padding: 0 3px; 
    background-color: white; 
    transition: background-color 0.26s linear 0s; 
    &[class*="-add"] { 
     background-color: yellow; 
    } 
} 

出来上がり！ ngAnimateが '値2加算'、 '値10加算'などのクラスを自動的に追加したり削除したりすると、背景色は黄色に変わり、値が変わるたびに戻ります。