angulaire.js - Comment établir une communication en temps réel entre deux contrôleurs dans AngularJS?

Question

Il y a deux contrôleurs a et b ; il y a un événement de clic dans le contrôleur a. Après avoir cliqué, comment afficher un p dans le contrôle b ?

Par exemple : le contrôleur a est un menu, le contrôleur b est une zone de contenu, cliquez sur différents menus dans a, et contrôlez l'affichage de différents contenus dans b,

Quelques efforts : j'ai essayé le service et l'usine, mais je ne peux que partager des données mais je ne peux pas les déclencher en temps réel

Answer 1

J'ai essayé deux méthodes ici :
1. Utilisez le propre mécanisme d'événement d'Angular

.

(function() {
    'use strict';

    angular
        .module('app.core')
        .factory('eventService', eventService);

    /* @ngInject */
    function eventService(logger) {
        var service = {
            on_angular_event: on_angular_event,
            trigger_angular_event: trigger_angular_event
        };

        return service;

        function on_angular_event(scope, type, f) {
            scope.$on(type, function(event, data){
                f(data);
                // 处理时间后阻止事件继续扩散
                event.stopPropagation = true;
            })
        }

        function trigger_angular_event(scope, deriction, type, data) {
            // deriction: up, down, sibling
            if (deriction === 'up') {
                scope.$emit(type, data);
            } else if (deriction === 'down'){
                scope.$broadcast(type, data);
            } else if (deriction === 'sibling'){
                scope.$parent.$broadcast(type, data);
            }
        }
    }
})();

Utilisé dans le contrôleur, ajoutez a pour envoyer une notification d'événement à b :

controller_A.$inject = [$scope, eventService];
function controller_A($scope, eventService) {
    //send event
    //direction 根据 A 和 B 的关系来定，父子用up或down，兄弟用sibling
    eventService.trigger_angular_event($scope, direction, 'event_name', data);
}

controller_B.$inject = [$scope, eventService];
function controller_B($scope, eventService) {
    // recv event from controller_A
    eventService.on_angular_event($scope, 'event_name', function(data){
        // do something here
    });
}

2. Utilisez le service pour simuler des événements de rappel. L'essence est d'utiliser le service pour enregistrer une fonction de rappel globale à utiliser entre les contrôleurs

.

(function() {
    'use strict';

    angular
        .module('app.core')
        .factory('eventService', eventService);

    /* @ngInject */
    function eventService(logger) {
        var onEventFunc = {};

        var service = {
            on: on,
            trigger: trigger
        };

        return service;

        function on(type, f) {
            onEventFunc[type] = onEventFunc[type] || [];
            var funcs = onEventFunc[type];

            // Todo:同一个事件可以让不同的监听者监听，但是同一个监听者的回调只能注册一次。而回调函数多用匿名函数注册，此处用toString()进行区分，效率较低。
            var exist = false;
            for (var i = 0; i < funcs.length; i++) {
                if (funcs[i].toString() === f.toString()) {
                    exist = true;
                    break;
                };
            };

            if (!exist) {
                funcs.push(f);
            };
        }

        function trigger(type, data) {
            //logger.info('trigger', data);
            for (var item in onEventFunc) {
                if (item === type) {
                    var funcs = onEventFunc[item];
                    for (var i = 0; i < funcs.length; i++) {
                        funcs[i](data);
                    };
                }                    
            }
        }
    }
})();

Answer 2

Hmm. Vous pouvez essayer des mécanismes de diffusion d'événements et de tunneling.

Answer 3

Vous pouvez jeter un œil à ceci

Pour être plus direct, vous pouvez essayer $broadcast et $on, mais l'efficacité sera médiocre

Answer 4

Voyant que ce qui est écrit ci-dessus n'est pas assez pur (mélangé à d'autres considérations), j'ajouterai une version pure.
Démo fournie

Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="myApp">

<p ng-controller="aCtrl">
    <button type="button" ng-click="click()">click</button>
</p>

<p ng-controller="bCtrl">
    <p ng-if="showConfig.show">will show me</p>
</p>

<script src="../bower_components/angular/angular.min.js"></script>
<script>
    // 通过事件，记得利用$rootScope 来广播事件。
    // 优点是解耦，也是ng的一种通讯方式. 很容易理解
    // 有人说什么性能差，效率不高之类的。 其实不是非常大的应用完全不用关注这个。 我理解就是一种js级冒泡。 性能远远小于dom操作。
//    angular.module('myApp', []).controller('aCtrl', function ($scope, $rootScope) {
//        $scope.click = function () {
//            $rootScope.$broadcast('do_show');
//        };
//    }).controller('bCtrl', function ($scope) {
//        $scope.showConfig = {
//            show: false
//        };
//        $scope.$on('do_show', function () {
//            $scope.showConfig.show = !$scope.showConfig.show;
//        })
//    });
</script>
<script>
    // 利用ng双向绑定技术。 通过Service提供一个Scope，具备Scope的特性，利用这个Scope 把 aCtrl bCtrl 建立联系。
    //    angular.module('myApp', []).controller('aCtrl', function ($scope, $rootScope, Service) {
    //        $scope.click = function () {
    //            Service.showConfig.show = !Service.showConfig.show;
    //        };
    //    }).controller('bCtrl', function ($scope, Service) {
    //        // 注意这里是把Scope赋值。 而非 Service.showConfig.show 一个值赋值。
    //        $scope.showConfig = Service.showConfig;
    //    }).factory('Service', function ($rootScope) {
    //        var showConfig = $rootScope.$new();
    //        showConfig.show = false;
    //        return {
    //            showConfig: showConfig
    //        };
    //    });
</script>
<script>

</script>
</body>
</html>

Answer 5

1). Créez un bus d'événements pour gérer tous les événements de manière globale
2). Utilisez $broadcast et $emit