AngularJS 广播事件没有在指令中监听

Question

我正在尝试将一些数据导出到 xls、pdf，通过使用 AngularJS $broadcast 事件获取示例 - plunker.

这是我的控制器：

admin.controller('ctrlReuniaoRelatorioDetalhe', ['$scope', '$http', '$controller', '$window', 'baseURL', 'blockUI', function($scope, $http, $controller, $window, baseURL, blockUI) {
  angular.extend(this, $controller('BaseListController', {
    $scope: $scope
  }));

  $scope.Formulario = "ReuniaoRelatorioDetalheViewModelForm";
  $scope.dataemissao = new Date();
  ctrlReuniaoRelatorioDetalhe = $scope;
  ctrlReuniaoRelatorioDetalhe.http = $http;


  $scope.reportData = [{
    "EmployeeID": "1234567",
    "LastName": "Lastname",
    "FirstName": "First name",
    "Salary": 1000
  }, {
    "EmployeeID": "11111111",
    "LastName": "Lastname 1",
    "FirstName": "First name 1",
    "Salary": 2000
  }, {
    "EmployeeID": "222222222",
    "LastName": "Lastname 2",
    "FirstName": "First name 2",
    "Salary": 3000
  }, {
    "EmployeeID": "333333333",
    "LastName": "Lastname 3",
    "FirstName": "First name 3",
    "Salary": 4000
  }];

  $scope.exportAction = function(option) {

    switch (option) {
      case 'pdf':
        $scope.$broadcast('export-pdf', {});
        break;
      case 'excel':
        $scope.$broadcast('export-excel', {});
        break;
      case 'doc':
        $scope.$broadcast('export-doc', {});
        break;
      case 'csv':
        $scope.$broadcast('export-csv', {});
        break;
      default:
        console.log('no event caught');
    }
  }
}]);

这是我的指令：

 app.directive('exportTable', function() {
   var link = function($scope, elm, attr) {
     $scope.$on('export-pdf', function(e, d) {
       elm.tableExport({
         type: 'pdf',
         escape: false
       });
     });
     $scope.$on('export-excel', function(e, d) {
       elm.tableExport({
         type: 'excel',
         escape: false
       });
     });
     $scope.$on('export-doc', function(e, d) {
       elm.tableExport({
         type: 'doc',
         escape: false
       });
     });
     $scope.$on('export-csv', function(e, d) {
       elm.tableExport({
         type: 'csv',
         escape: false
       });
     });
   }
   return {
     restrict: 'C',
     link: link
   }
 });

我不知道为什么我的指令中的 $scope.$on() 没有监听我的事件。 $scope.exportAction 正在工作，但是当 "broadcast" 被触发时，没有任何反应。

Answer 1

您需要cover/analyze 这里有两个场景。请检查此答案中的两个工作示例，并让自己了解 AngularJS 中的广播是如何工作的。

此链接将帮助您更深入地了解广播事件：

当您的指令是触发事件的控制器的子项时，请使用 $scope.$broadcast()。 -> demo fiddle

AngularJS申请

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.name = 'Superhero';

    $scope.clickMe = function () {
       $scope.$broadcast('test');
    }
});

myApp.directive('myDirective', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        scope.$on('test', function () {
            console.log('hello world');
        })
      }
    }
});

查看

<div ng-controller="MyCtrl">
  <button ng-click="clickMe()">
    Click Me
  </button>
  <div my-directive></div>
</div>

当您的指令不是触发事件的控制器的子项时，请使用 $rootScope.$broadcast()。 -> demo fiddle

AngularJS申请

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($rootScope, $scope) {
    $scope.name = 'Superhero';

    $scope.clickMe = function () {
       $rootScope.$broadcast('test');
    }
});

myApp.directive('myDirective', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs, $rootScope) {
        scope.$root.$on('test', function () {
            console.log('hello world');
        })
      }
    }
});

查看

<div ng-controller="MyCtrl">
  <button ng-click="clickMe()">
    Click Me
  </button>
</div>
<div my-directive></div>

AngularJS 广播事件没有在指令中监听

AngularJS broadcast event is not listening inside directive

javascript

angularjs

directive

broadcast

AngularJS申请

查看

AngularJS申请

查看

AngularJS 广播事件没有在指​​令中监听

AngularJS broadcast event is not listening inside directive

javascript

angularjs

directive

broadcast

AngularJS申请

查看

AngularJS申请

查看

AngularJS 广播事件没有在指令中监听