国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

angular.js - angularjs中如何在兩個(gè)控制器中實(shí)現(xiàn)實(shí)時(shí)通信？

迷茫 2017-05-15 16:56:29

967

有兩個(gè)控制器 a和b；在a控制器中有一個(gè)click事件，單擊之后，怎樣將b控制中的一個(gè)p顯示出來(lái)？

舉個(gè)例子：a控制器是菜單，b控制器是內(nèi)容區(qū)，a中單擊不同的菜單，b中要控制顯示不同的內(nèi)容，

一些努力：嘗試了service和factory，只能共享數(shù)據(jù)，做不到實(shí)時(shí)觸發(fā)

迷茫

業(yè)精于勤，荒于嬉;行成于思，毀于隨。

Antworte allen(5)

洪濤2017-05-15 16:58:29 5 Etage

我這邊嘗試過(guò)兩種：
1.使用angular自己的事件機(jī)制

(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);
                // 處理時(shí)間后阻止事件繼續(xù)擴(kuò)散
                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);
            }
        }
    }
})();

在controller里面使用，加入a向b發(fā)事件通知：

controller_A.$inject = [$scope, eventService];
function controller_A($scope, eventService) {
    //send event
    //direction 根據(jù) A 和 B 的關(guān)系來(lái)定，父子用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.用service模擬回調(diào)事件，本質(zhì)是用service保存了一個(gè)全局的回調(diào)函數(shù)供controller之間使用

(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:同一個(gè)事件可以讓不同的監(jiān)聽(tīng)者監(jiān)聽(tīng)，但是同一個(gè)監(jiān)聽(tīng)者的回調(diào)只能注冊(cè)一次。而回調(diào)函數(shù)多用匿名函數(shù)注冊(cè)，此處用toString()進(jìn)行區(qū)分，效率較低。
            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);
                    };
                }                    
            }
        }
    }
})();

Wie +0

Antwort hinzufügen

過(guò)去多啦不再A夢(mèng)2017-05-15 16:58:29 4 Etage

嗯。可以試試事件冒泡和隧道機(jī)制。

Wie +0

Antwort hinzufügen

給我你的懷抱2017-05-15 16:58:29 3 Etage

可以看看這個(gè)

直接一點(diǎn)的可以嘗試$broadcast和$on，但是效率會(huì)比較差

Wie +0

Antwort hinzufügen

滿天的星座2017-05-15 16:58:29 2 Etage

看樓上寫(xiě)的不夠純粹（參雜其他考慮），我來(lái)補(bǔ)充下純粹版。
提供的 demo

代碼如下

<!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>
    // 通過(guò)事件，記得利用$rootScope 來(lái)廣播事件。
    // 優(yōu)點(diǎn)是解耦，也是ng的一種通訊方式. 很容易理解
    // 有人說(shuō)什么性能差，效率不高之類的。 其實(shí)不是非常大的應(yīng)用完全不用關(guān)注這個(gè)。 我理解就是一種js級(jí)冒泡。 性能遠(yuǎn)遠(yuǎn)小于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雙向綁定技術(shù)。 通過(guò)Service提供一個(gè)Scope，具備Scope的特性，利用這個(gè)Scope 把 aCtrl bCtrl 建立聯(lián)系。
    //    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 一個(gè)值賦值。
    //        $scope.showConfig = Service.showConfig;
    //    }).factory('Service', function ($rootScope) {
    //        var showConfig = $rootScope.$new();
    //        showConfig.show = false;
    //        return {
    //            showConfig: showConfig
    //        };
    //    });
</script>
<script>

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

Wie +0

Antwort hinzufügen