Controller 間的通訊

1 篇文章 / 0 new

發表回應前，請先登入

週五, 2014-07-11 11:39

author

Controller 間的通訊

控制器間的通訊可利用 Service的事件當作中間者, 透過事件機制 $on 與 $emit / $broadcast 來達成. $emit / $broadcast 兩者間最大差異在於 $emit 可中途被接收者取消, 一旦取消上事件就不會繼續傳送. 而 $broadcast 則無法被中途取消.

►建立一個事件驅動步驟

1. 宣告 onMyEvent 事件界面, $on 第一個參數則為 myEvent 與事件名稱相對應

var onMyEvent = function($scope, handler) {
    $scope.$on('myEvent', function(event, message) {
        handler(message);
    });
};

2. 使用 $rootScope.$broadcast 觸發事件

$rootScope.$broadcast('myEvent', { 傳遞的參數 } );

3. 接受事件

service.onMyEvent($scope, function(message) {
    //事件處理
});

►範例如下
javascript

var app = angular.module('app', []);
app.controller('controllerA', ['$scope', 'pubsubService', controllerA]);
function controllerA($scope, pubsubService) {
    console.log('controllerA');
    $scope.changeTeam = function() {
        console.log('controllerA.changeTeam');
        pubsubService.changeTeam($scope.teamname);
    };
}
app.controller('controllerB', ['$scope', 'pubsubService', controllerB]);
function controllerB($scope, pubsubService) {
    console.log('controllerB');
    pubsubService.onChangeTeam($scope, function(message) {//接受事件
        console.log('controllerB.onChangeTeam');
        $scope.team = message.filterTeam;
    });
    $scope.confirm = function() {
        console.log('controllerB.confirm');
        pubsubService.confirmTeam($scope.team);
    };
}
 
app.controller('controllerC', ['$scope', 'pubsubService', controllerC]);
function controllerC($scope, pubsubService) {
    console.log('controllerC');
    pubsubService.onConfirmTeam($scope, function(message) {//接受事件
        console.log('controllerC.onConfirmTeam');
        $scope.team = 'Confirmed name: ' + message.confirmedTeam;
    });
}
 
var serviceId = 'pubsubService';
app.factory(serviceId, ['$rootScope', pubsubService]);
 
function pubsubService($rootScope) {
    var CHANGE_TEAM = "changeTeam";
    var changeTeam = function(filterTeam) {
        console.log('pubsubService.changeTeam');
        $rootScope.$broadcast(CHANGE_TEAM, {//觸發事件
            filterTeam: filterTeam
        });
    };
    var onChangeTeam = function($scope, handler) {//宣告事件介面
        console.log('pubsubService.onChangeTeam');
        $scope.$on(CHANGE_TEAM, function(event, message) {
            handler(message);
        });
    };
 
    var CONFIRM_TEAM = "confirmTeam";
    var confirmTeam = function(name) {
        console.log('pubsubService.confirmTeam');
        $rootScope.$broadcast(CONFIRM_TEAM, {
            confirmedTeam: name
        });
    };
    var onConfirmTeam = function($scope, handler) {
        console.log('pubsubService.onConfirmTeam');
        $scope.$on(CONFIRM_TEAM, function(event, message) {
            handler(message);
        });
    };
    return {
        changeTeam: changeTeam,
        onChangeTeam: onChangeTeam,
        confirmTeam: confirmTeam,
        onConfirmTeam: onConfirmTeam
    };
}

► html 部份, 三個不同的 Controller

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Controller 間的通訊</title>
        <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
        <script src="app.js" type="text/javascript"></script>
    </head>
    <body ng-app="app">
        <div ng-controller="controllerA">
            <input data-ng-model="teamname" type="text" data-ng-change="changeTeam()" />
        </div>
        <div ng-controller="controllerB">輸入內容: {{team}}<br />
            <input type="button" value="確認" data-ng-click="confirm()" />
        </div>
        <div ng-controller="controllerC">{{team}}</div>
    </body>
</html>

from http://www.theroks.com/angularjs-communication-controllers/