5

私はAngularJSが初めてです。ユーザーがdiv "B"をスクロールすると、AngularJSでdiv "A"を非表示にしたい。現在、ユーザーが ng-click を使用して div "B" をクリックすると、div "A" を非表示にできますが、AngularJS でスクロールする方法が見つかりませんでした。JQueryを使用してdivを非表示にできますが、AngularJSでそれを行う方法はありますか?

アップデート：

スクロール ディレクティブを作成し、$window でアタッチしました。ウィンドウ全体をスクロールするとdivが非表示になりますが、特定のdivがスクロールされたときに非表示にしたいです。私の現在の実装は次のようになります。



    app.directive("scroll", function ($window) {
        return function(scope, element, attrs) {
            angular.element($window).bind("scroll", function() {
                if (this.pageYOffset >= 10) {
                    scope.hideVs = true;
                } else {
                    scope.hideVs = false;
                }
                scope.$apply();
            });
        };
    });
4

2 に答える 2

8

なぜこれをやりたいのかわかりませんが、あなたが望むと思うものでjsfiddleを作成しました。

私はあなたのディレクティブを少し修正しました：

app.directive("scroll", function () {
        return function(scope, element, attrs) {
            angular.element(element).bind("scroll", function() {
              scope[attrs.scroll] = true;
                scope.$apply();
            });
        };
    });

ご覧のとおり、ウィンドウではなくdivのスクロールイベントにバインドされています。また、設定する変数を変更して、スクロール ディレクティブに提供された値を変数名として受け取るようにしました。

http://jsfiddle.net/Tx7md/

これは、 @ganaraj が提案するように $parse を使用して値を設定するバージョンです

于 2013-05-02T10:54:49.267 に答える
2

ここでは、jQuery を使用したくないと仮定します。

jqLit​​e 関数のみを使用して div B から div A への参照を取得できることが絶対に確実でない限り、ディレクティブを使用しても完全な解決策にはなりません。

できることは、2 つのディレクティブを作成することです。div B の「do-hide-on-scroll」と、div A の「get-hidden-on-scroll」です。これらを使用して、div B の「scroll」イベントをキャッチします。それを使用して Angularイベントを生成し$rootScope.emit、「div B is scrolling」イベントを最上位の親スコープに送信します。親スコープは、これを受け取ると$rootScope.broadcast、すべての子スコープと同じになります。そのうちの 1 つは div A です。Div A の「get-hidden-on-scroll」ディレクティブには、このイベントをリッスンして非表示にするイベント ハンドラーがあります。 div を再度表示するために $timeout を 0.5 秒に設定します。再度イベントを受信すると、タイムアウトをリセットします。

これは、jQuery を使用する場合と比べてかなり複雑です。しかし、最終的には、パフォーマンスが向上している可能性があります。全体として、純粋に Angular でクラックするのが難しいナッツの 1 つです。良い質問！

于 2013-05-02T10:51:46.550 に答える