20

私はDOM要素です（たとえば、テーブルにバインドされています）。私は ngShow ベースのタブ コントロールの下流の子です。私は2番目のタブに住んでいます。ページがレンダリングされると、私は存在しますが、まだ実際には見えません。

ngShow 式が true になったときに、直接ではない親を通じて表示されるようになったときに、何らかの方法で通知されたいと思います。

これは可能ですか？自分以外の場所にコードを追加することは避けたいと思います。たとえば、どこかのタブ変更イベントにコードを追加したくありません。ngShow/ngHide を介してバインドされている最も外側のコンテナーの変更を介して、可視性がいつ変化するかを確認するために登録する方法が必要です。これはできますか？

4

5 に答える 5

21

ディレクティブで使用可能なスコープがあるため、これを使用して可視性の変化を監視できます。

scope.$watch(function() { return element.is(':visible') }, function() {
  // Do whatever should happen when the visibility changes
});

これにより、パフォーマンスが低下する可能性がある可視性のポーリングが回避されます。もちろん、これは、可視性を変更する原因によってスコープが適用されることを前提としています。私は自分のディレクティブで試しましたが、ngShow/ngHide とは関係ありません。

クレジットが必要な場合のクレジット: これは (私ではなく) 最初に提案されたものです:
https://groups.google.com/d/msg/angular/w7Gxa5M_17M/koYCZnsobawJ

EDIT 2014-02-24
数か月後にこの回答を再検討したところ、これは機能しますが、ダイジェスト サイクルがかなり遅くなることに気付きました。ベスト プラクティスは、このような高価な関数をダーティ チェックに使用しないことです。注意して使用してください！

于 2013-07-17T11:22:35.757 に答える
4

私はこれをディレクティブで行いました：

要素:

<test-directive ng-show="showMe" show-model="showMe"></test-directive>

指令：

app.directive('testDirective', function() {
    return {
        restrict: 'E',
        scope: {
            showModel: "=?",
        },
        controller: function($scope) {
            if (angular.isDefined($scope.showModel)) {
                $scope.$watch('showModel', function(newValue, oldValue) {
                    // Do stuff
                });
            }
        }
     }
});

したがって、ng-show にリンクされた同じ変数に $watch を配置するという考えです。

于 2014-03-19T10:27:43.990 に答える
3

別の可能な方法は、$broadcast を使用することです。タブを選択すると、イベントをブロードキャストできます

$scope.$broadcast('secondTabSelected');

コントローラー内でこのイベントを処理し、さらに処理を行うことができます。

$scope.$on('secondTabSelected', function(e){
    // do something awesome.
})

これにより、タブが表示されるたびに通知されます。一度だけ実行するには、次のことができます

var firstTimeSelected = false;
$scope.$on('secondTabSelected', function(e){
    if(firstTimeSelected){
        firstTimeSelected = true;
        // do something awesome
    }
})
于 2015-10-27T10:26:06.500 に答える