javascript - 如何根据用户选择使用多个广播来调用 Angular Controller

Question

我正在开发 angularjs 应用程序。在我的网页中，我有很多数据范围选择器。当用户从日期选择器中选择一个日期范围时，我需要将所选日期传递给分配给该组件的特定 Angular Controller 。请参阅下面的代码，当用户从日期范围选择器中选择一个日期范围并单击“应用”时调用该代码，我正在使用 $broadcast 将选定的日期传递给另一个 Controller 。

var cb = function(start, end) {
   $('.reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  var reportStartDate  = start.format('MM-DD-YYYY');
   var reportEndDate = end.format('MM-DD-YYYY');
    $rootScope.$broadcast('loadSimDateCtrl', reportStartDate, reportEndDate);/*When user selects a date range in daterangepicker, this function is invoked,
    the selected date is passed to the angular controller using broadcast*/
 }

当我的单个 html 文件中有多个日期范围选择器时，如何知道正在选择哪个日期范围选择器。并且根据为特定日期选择器选择的日期，我需要将日期范围传递给特定的 Angular Controller 。请指教。

给出了粗略的例子here .当用户从 SIM 日期范围 ctrl 选择 darerange 时，我需要通过传递选定的日期来调用 simDateCtrl。对于其他日期选择器也是如此。请指教。在单个函数中 var cb = function(start, end) {. 如何调用 $broadcast 进而调用另一个 Angular Controller 。

Answer 1

angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', '$http', '$rootScope', MyCtrl])
  
  
  function MyCtrl($scope, $http, $rootScope){
    $scope.callBackend1 = function(event) {
      console.log('Check1')
      $rootScope.$broadcast('date1', 'start1', 'end1')
      // here call to backend, if possible do with $http service
    }
    $scope.callBackend2 = function(event) {
      console.log('Check2')
      $rootScope.$broadcast('date2', 'start2', 'end2')
      // here call to backend, if possible do with $http service
    }
    $rootScope.$on('date1', function(event, data){
      console.log(data)
    })
    $rootScope.$on('date2', function(event, data){
      console.log(data)
    })
  }

<input class="reportrange simDateRange" ng-model="simDate" ng-change="callBackend1($event)" />
  <br />
  <br />
  <br /> Select Phone Date Range:
  <input class="reportrange phoneDateRange" ng-model="phoneDate" ng-change="callBackend2($event)" />