15

私のAngularJSアプリでは、がDOMに処理されるのを待ってから、たとえば$scopejQueryなどのコードを実行するポイントがいくつかあります。fadeIn

ある種の「digestComplete」メッセージをリッスンする方法はありますか？

$scope私の現在の方法は次のとおりです。レンダリングする変数を設定した直後にsetTimeout、0ミリ秒の遅延で使用して、スコープのダイジェストを終了し、コードを実行します。これは完全に機能します。唯一の問題は、setTimeoutが戻る前にDOMレンダリングが表示されることが非常にまれなことです。ダイジェスト後、レンダリング前に確実に起動するメソッドが欲しいのですが。

4

3 に答える 3

15

このjQueryフェードインアンドアウトフィドル（JSFiddles Examples wikiページで見つけました）では、作成者は「fadey」ディレクティブを定義し、ディレクティブのリンク関数でjQueryフェードイン（またはフェードアウト）を実行します。

<li ng-repeat="item in items" fadey="500">
...
myApp.directive('fadey', function() {
return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
        var duration = parseInt(attrs.fadey);
        if (isNaN(duration)) {
            duration = 500;
        }
        elm = jQuery(elm); // this line is not needed if jQuery is loaded before Angular
        elm.hide();
        elm.fadeIn(duration)

別の可能な解決策は、$evalAsyncを使用することです。Miškoによるこのコメントを参照してください。彼は次のように述べています。

asyncEvalは、DOMの構築後、ブラウザーがレンダリングする前です。それがjqueryプラグインをアタッチしたい時だと思います。そうしないと、ちらつきが発生します。ブラウザのレンダリング後に本当に実行したい場合は、$ defer（fn、0）;を実行できます。

（$deferは$timeoutに名前が変更されました）。

ただし、（DOMを操作しているため）ディレクティブを使用する方が良いアプローチだと思います。

これは、いくつかのjQuery関数を適用するために、OPがスコープで$ viewContentLoadedイベントをリッスンしようとしたSO投稿です（これはさらに別の代替手段です）。提案/回答は、再びディレクティブを使用することでした。

于 2012-08-24T16:21:28.373 に答える
3

または、この例は、AngularJSの組み込みのng-showディレクティブと同じように機能しますが、AngularJSの条件に基づいてフェードインまたはフェードアウトする点が異なります。

<li ng-repeat="item in items" ng-ds-fade="{condition}">
<!-- E.g.: ng-ds-fade="items.length > 0" -->
...
myApp.directive('ngDsFade', function () {
  return function(scope, element, attrs) {
    element.css('display', 'none');
    scope.$watch(attrs.ngDsFade, function(value) {
      if (value) {
        element.fadeIn(200);
      } else {
        element.fadeOut(100);
      }
    });
  };
});

ソース： http： //www.codeproject.com/Articles/464939/Angular-JS-Using-Directives-to-Create-Custom-Attri

于 2013-01-07T17:36:27.693 に答える
1

jQueryを実行するだけの場合は、Angular-UI jQueryパススルーを試してみませんか？

于 2013-04-13T17:53:09.803 に答える