$on和$broadcast角度

javascript angularjs

2022-08-30 00:12:12

我有一个页脚控制器和代码扫描器控制器具有不同的视图。

angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
console.log("start");
$scope.startScanner = function(){...

当我单击页脚时.html我应该在 codeScannerController 中获取此事件。<li>

<li class="button" ng-click="startScanner()">3</li>

我认为它可以用和来实现，但我不知道如何实现，也无法在任何地方找到例子。$on$broadcast

答案 1

如果要使用：$broadcast$rootScope

$scope.startScanner = function() {

    $rootScope.$broadcast('scanner-started');
}

然后要接收，请使用控制器的：$scope

$scope.$on('scanner-started', function(event, args) {

    // do what you want to do
});

如果你愿意，你可以在以下情况下传递参数：$broadcast

$rootScope.$broadcast('scanner-started', { any: {} });

然后接收它们：

$scope.$on('scanner-started', function(event, args) {

    var anyThing = args.any;
    // do what you want to do
});

在作用域文档中提供此内容的文档。

答案 2

首先，对$on（）、$broadcast（） 和 $emit（）的简短描述：

.$on(name, listener)- 通过给定的给定事件侦听特定事件name
.$broadcast(name, args)- 通过所有儿童向下广播活动$scope
.$emit(name, args)- 向所有父级（包括$scope$rootScope

基于以下 HTML（请参阅此处的完整示例）：

<div ng-controller="Controller1">
    <button ng-click="broadcast()">Broadcast 1</button>
    <button ng-click="emit()">Emit 1</button>
</div>

<div ng-controller="Controller2">
    <button ng-click="broadcast()">Broadcast 2</button>
    <button ng-click="emit()">Emit 2</button>
    <div ng-controller="Controller3">
        <button ng-click="broadcast()">Broadcast 3</button>
        <button ng-click="emit()">Emit 3</button>
        <br>
        <button ng-click="broadcastRoot()">Broadcast Root</button>
        <button ng-click="emitRoot()">Emit Root</button>
    </div>
</div>

触发的事件将按如下方式遍历：$scopes

广播 1 - 仅由控制器 1 看到$scope
发出 1 - 控制器 1 将看到，然后$scope$rootScope
广播 2 - 控制器 2 和控制器 3 将看到$scope$scope
发出 2 - 控制器 2 将看到，然后$scope$rootScope
广播 3 - 仅由控制器 3 看到$scope
发出 3 - 控制器 3、控制器 2 将看到$scope$scope$rootScope
广播根 - 所有控制器（1、2 和 3）都将看到$rootScope$scope
发出根 - 只会被看到$rootScope

JavaScript来触发事件（同样，你可以在这里看到一个工作示例）：

app.controller('Controller1', ['$scope', '$rootScope', function($scope, $rootScope){
    $scope.broadcastAndEmit = function(){
        // This will be seen by Controller 1 $scope and all children $scopes 
        $scope.$broadcast('eventX', {data: '$scope.broadcast'});

        // Because this event is fired as an emit (goes up) on the $rootScope,
        // only the $rootScope will see it
        $rootScope.$emit('eventX', {data: '$rootScope.emit'});
    };
    $scope.emit = function(){
        // Controller 1 $scope, and all parent $scopes (including $rootScope) 
        // will see this event
        $scope.$emit('eventX', {data: '$scope.emit'});
    };

    $scope.$on('eventX', function(ev, args){
        console.log('eventX found on Controller1 $scope');
    });
    $rootScope.$on('eventX', function(ev, args){
        console.log('eventX found on $rootScope');
    });
}]);