20

私はすべての Angular World に不慣れで、ディレクティブの管理に問題があります。

タブを使用するプロジェクトに取り組んでおり、ウィンドウのサイズがすべてのタブの幅よりも狭い場合にオーバーフローしたタブを処理するように機能を拡張したいので、これを達成するために要素の寸法を計算する必要があります。タブは $scope 内のオブジェクトから構築されます。問題は、ビューが完全にコンパイルされる前に、ディメンションを計算するディレクティブが実行されることです。

Plnkr リンク: http://plnkr.co/edit/LOT4sZsNxnfmQ8zHymvw?p=preview

私が試したこと：

  1. templateUrl を使用してディレクティブにテンプレートをロードする
  2. トランスクルードの操作
  3. ng-repeat で $last を使用するには
  4. ディレクティブの順序を変更し、すべてのタブでダミーのディレクティブを作成してイベントをトリガーしてみてください

この状況を処理するためのAngularJsイベントまたはプロパティがあると思います。

みんな助けてください:)

4

4 に答える 4

8

私はあなたのプランカーに枝を作ります、私はこれがあなたが探していたものだと思います

あなたの指示をこれに変更します

.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

次に、HTMLにディレクティブを追加しました

 <li ng-repeat="tab in tabs" on-finish-render-filters>

そして最後に、繰り返し終了後に実行したいコードを入れます

$scope.$on('ngRepeatFinished', function (ngRepeatFinished) {
        $scope.tabs = [{
            index: 1,
            title: "Tab 1",
            link: "/tab1/"
        },{
            index: 2,
            title: "Tab 2",
            link: "/tab2/"
        },{
            index: 3,
            title: "Tab 3",
            link: "/tab3/"
        },{
            index: 4,
            title: "Tab 4",
            link: "/tab4/"
        }];

  });

http://plnkr.co/edit/TGduPB8FV47QvjjLnFg2?p=preview

于 2014-04-10T03:52:17.787 に答える
6

AngularJS には、ng-repeat 内で使用されるディレクティブに対する信頼できるレンダリング後のコールバックがないようです。[1]

特定の画面幅に対して「レスポンシブ」オーバーフロー制御要素を追加することで、CSS レベルでこれを解決できるかもしれません。

  1. https://groups.google.com/forum/#!topic/angular/SCc45uVhTt8

更新: ネストされた $timeouts を使用してこれを行う方法があります。参照: http://lorenzmerdian.blogspot.de/2013/03/how-to-handle-dom-updates-in-angularjs.html

于 2013-03-04T10:15:56.697 に答える
3

あなたのコメントによると、あなたはすでに機能する解決策を持っています...そしてそれは現在私が知っている唯一の解決策です: $timeout.

問題は、何を達成したいのかということです。すべてのレンダリングが完了したら、コールバックが必要です。わかりましたが、角度はどうやってこれを知ることができますか? angularを使用して明らかに開発している最新のアプリでは、再レンダリングが常に発生する可能性があります! アプリを初期化した直後でも、データがバックエンドから読み込まれる場所で js イベントが発生し、再レンダリングが発生する可能性があります。ユーザーがマウスを動かすと、要素の再レンダリングがトリガーされる可能性があります。これは、CSS ルールのために angulars の範囲外であってもです。再レンダリングはいつでも発生する可能性があります。

では、これらの考慮事項により、レンダリングが完了したときに angularJS は何を教えてくれるのでしょうか? 現在の $apply および/または $digest チェーンが処理されたとき、つまりブラウザーのイベント キューが今のところ空であることのみを通知できます。angularJS が知っている情報は、まさにそれだけです。そして、これには 0 の遅延で $timeout を使用します。

はい、あなたは正しいです、より大きなアプリケーションでは、もはや信頼できない点までトリッキーになる可能性があります。しかし、この場合、これを別の方法で解決する方法を考える必要があります。後で再レンダリングが発生した場合は、バックエンドからロードされた新しいデータなどの原因があるはずです。その場合、データがいつロードされて再レンダリングが行われるかがわかるため、幅をいつ更新する必要があるかが正確にわかります。

于 2013-05-14T08:26:53.420 に答える