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正在运行但是当＆＃34;广播＆＃34;被解雇了，没有任何事情发生。

Answer 1

您需要在此处涵盖/分析两种情况。请检查此答案中的两个工作示例，并让自己了解AngularJS中的广播是如何工作的。

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

当您的指令是触发事件的控制器的子节点时，请使用$scope.$broadcast()。 - ＆GT; 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()。 - ＆GT; 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广播事件不在侦听内部指令

1 个答案:

AngularJS应用程序

视图

AngularJS应用程序

视图