AngularJS イベントの発行についてどれくらい知っていますか? この記事では、AngularJS イベントの詳細について知りたいことを説明します。

この記事では主にangularjsイベントのリリースについて詳しく紹介します。それでは、急いでこの記事を一緒に読んでください

未読メッセージリマインダー:

機器の使用者または技術機関が非強制検査機器の校正申請に対して新たな意見を出した場合、相手方に通知する必要があります。メッセージ。バックエンドは非常に単純です。この記事では主にフロントエンドで発生する問題を解決します。

歴史的遺産

これは、キャッシュ superCache を使用して、メッセージに残った未読メッセージをカウントするコマンドです。 superCache。

一眼看去应该能发现这个if...else的问题，第一次请求，将数据放到缓存里，之后就一直从缓存中取了，这肯定有问题啊！原来有1条消息，然后点击查看，然后这个指令仍然是从缓存中取的数据，还显示一条。

angular.module('webappApp')
    .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
        return {
            template: '',
            restrict: 'E', // 元素
            link: function postLink(scope, element) {
                // 判断缓存中是否存在未读消息数量
                if (typeof superCache.get('unReadMessageCount') === 'undefined') {
                    // 获取当前用户的所有未读收件消息
                    ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) {
                        // 存入缓存
                        superCache.put('unReadMessageCount', data.totalElements);
                        // 显示文本信息
                        element.text(superCache.get('unReadMessageCount'));
                    });
                } else {
                    // 显示文本信息
                    element.text(superCache.get('unReadMessageCount'));
                }
            }
        };
    });

功能实现

注销时清除缓存

注销时如果不清除缓存，下一个用户登录时用的就是上一用户留下来的缓存，造成信息提示错误。

阅读时重新执行指令

下图就是该实现的难点。

该用户有一条未读消息，当用户点击阅读这条消息时，将该消息的状态设置为已读，然后右上角的未读条数同时修改。但是点击这个事件是发生在控制器中，而消息又是一个额外的指令，两者毫无联系。(想学更多就到PHP中文网angularjs参考手册栏目中学习)

AngularJS的精髓就是Scope，这是两个Scope，页面内容是我们的控制器Scope，右上角的消息处是我们的未读消息指令Scope。

如若是简单的父子Scope关系，我们可以从控制器传参数到指令，指令watch这个参数，根据控制器对参数的变动让指令做出响应。但是这两个Scope毫无关系，我们怎么办呢？

事件发布

查阅了相关资料，AngularJS中Scope可以发布事件。

$broadcast(name, args);

Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.

向下分发一个事件给他的所有子Scope，通知已注册的Scope。

$emit(name, args);

Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

与$broadcast类似，只不过这个是用来向上发布事件的。

$on(name, listener);

Listens on events of a given type.

监听一个给定类型的事件。

代码实现

$rootScope

考虑到这两个控制器与指令之间Scope的关系，无论是向上还是向下可能都接收不到。

这里直接用$rootScope向下发布事件，保证所有Scope都能获取到该事件。免得去考虑当前Scope与目的Scope之间的关系。

// 广播发布reloadMessageCount事件，重新计算未读消息数量
$rootScope.$broadcast('reloadMessageCount');

因为考虑到各个层之间的职责关系，我认为：事件发布应该方法控制器中，而不应该放在Service中，Service就等着被别人调用，不应该与其他文件有耦合关系，否则改起来很难改。

$on

重构指令，使用$on

この if...else の問題は一目でわかるはずです。最初のリクエストでデータがキャッシュに入れられ、その後もキャッシュからデータがフェッチされ続けます。それは間違っています！ 1 メッセージがあることがわかり、それをクリックして表示すると、このコマンドは引き続きキャッシュからデータを取得し、1 つのメッセージが表示されます。

angular.module('webappApp')
    .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
        return {
            template: '<b>{{ count }}</b>',
            restrict: 'E', // 元素
            link: function postLink(scope) {
                var self = this;

                self.init = function() {
                    self.computeMessageCount();
                };

                // 计算未读消息数量
                self.computeMessageCount = function() {
                    // 判断缓存中是否存在未读消息数量
                    if (angular.isUndefined(superCache.get('unReadMessageCount'))) {
                        // 获取当前用户的所有未读收件消息
                        ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) {
                            // 存入缓存
                            superCache.put('unReadMessageCount', data.totalElements);
                            // 显示
                            scope.count = superCache.get('unReadMessageCount');
                        });
                    } else {
                        scope.count = superCache.get('unReadMessageCount');
                    }
                };

                // 处理reloadMessageCount事件的处理逻辑
                scope.$on('reloadMessageCount', function() {
                    // 清除缓存
                    superCache.remove('unReadMessageCount');
                    // 计算未读消息数量
                    self.computeMessageCount();
                });

                // 初始化
                self.init();
            }
        };
    });

機能実装ログアウト時にキャッシュをクリア

ログアウト時にキャッシュをクリアしないと、次のユーザーがログイン時に前のユーザーが残したキャッシュを使用することになり、エラーメッセージが表示されます。

読み取り中に命令を再実行します

下の図は、この実装の難しさを示しています。
ユーザーが未読メッセージをクリックしてメッセージを読むと、メッセージのステータスが既読に設定され、同時に右上隅の未読メッセージの数が変更されます。ただし、クリック イベントはコントローラで発生し、メッセージは追加の指示であり、この 2 つは関連性がありません。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

angularjs リファレンス マニュアル

の列にアクセスして学習してください)

🎜🎜🎜🎜AngularJS の本質は Scope であり、2 つの Scope です。ページのコンテンツはコントローラの Scope で、右上隅のメッセージは未読メッセージ コマンド Scope です。 🎜🎜単純な親子 Scope 関係の場合、コマンド watch のパラメータによって、コントローラからコマンドにパラメータを渡すことができます。コントローラーのパラメーターの変化に基づいて。しかし、これら 2 つの Scope は相互に関係がありません。どうすればよいでしょうか。 🎜🎜🎜🎜 🎜🎜イベント発行🎜🎜 関連情報を参照した後、AngularJS の Scope でイベントを発行できます。 🎜

$broadcast(name, args);

rrreee🎜 は、すべての子の Scope にイベントを下位に配布し、登録された Scope に通知します。 🎜

$emit(name, args);

rrreee🎜 $broadcast と似ていますが、これはイベントを上向きに公開するために使用される点が異なります。 🎜

$on(name,listener);

rrreee🎜 指定されたタイプのイベントをリッスンします。 🎜🎜コード実装🎜

$rootScope

🎜 これら 2 つのコントローラーと命令の間の Scope 関係を考慮すると、上方向も下方向も受信できません。 🎜🎜ここでは、$rootScope を使用してイベントを直接公開し、すべての Scope がイベントを取得できるようにします。現在の Scope と宛先の Scope の間の関係を考慮する必要がなくなります。 🎜rrreee🎜各層間の責任のため、イベント発行はメソッドコントローラー内にあるべきであり、Service、Service などに配置すべきではないと思います。他のファイルと結合しないでください。結合しないと変更が困難になります。 🎜

$on

🎜 コマンドをリファクタリングし、$on を使用してイベント発行をリッスンし、対応するロジックを実行して右上隅に未読メッセージの数を再表示します。 🎜rrreee🎜🎜上記はこの記事の全内容です。さらに詳しく読みたい場合は、PHP 中国語 Web サイトの 🎜angularjs Learning Manual🎜 列にアクセスして、angularjs について詳しく学習してください。ご質問がございましたら、以下にメッセージを残してください。 🎜🎜【編集者のおすすめ】🎜🎜🎜angularjsフィルターの使い方をご存知ですか？ angularjsフィルターの詳細な説明を見てみましょう🎜🎜🎜🎜🎜angularjsで式を使用するにはどうすればよいですか? angularjsでの式の使用例🎜🎜🎜🎜🎜🎜

以上がAngularJS イベントの発行についてどれくらい知っていますか? この記事では、AngularJS イベントの詳細について知りたいことを説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。