複数のブロードキャストを使用して、ユーザーの選択に基づいて角度コントローラを呼び出す方法

Question

私はangularjsアプリケーションで作業しています。私のWebページには、多くのdatarange pickersがあります。ユーザーが日付ピッカーからdaterangeを選択すると、そのコンポーネントに割り当てられた特定の角度コントローラーに選択された日付を渡す必要があります。ユーザーがdaterangepickerからdaterangeを選択し、Applyをクリックすると呼び出される以下のコードを見てください。選択した日付を$ broadcastを使って別のコントローラに渡しています。私は特定の角度コントローラに日付範囲を渡す必要があり、特定の日付ピッカーのために選択した日付に基づいて、私の単一のHTML file.andで複数のdaterangepickersを持っているとき、日付範囲ピッカーが選択されているかを知る方法

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*/ 
} 

。ご意見をお聞かせください。

粗い例はhereです。 ユーザがSIM Date Range ctrlからdarerangeを選択した場合、選択した日付を渡すことによってsimDateCtrlを呼び出す必要があります。他の日付ピッカーに対しても同様です。ご意見をお聞かせください。 単一の関数var cb = function(start, end) {. } $ブロードキャストを呼び出す方法は別の角度コントローラを呼び出します。

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)" />

Answer 2

それはあなたのネストされたコントローラに下向きに伝播するよう放送を使用しないでください、すべての子供がその通知を受け取ることを保証するものではありません。代わりに、パブリッシュ時にイベントを発行するサービスを作成し、コントローラのいずれかでそのイベントを購読することができます。 MyCtrlでは、J Jinが指摘しているように、各daterange pickersのchange/selectイベントに異なるスコープ関数を割り当てることができます。

;(function(angular) { 
    "use strict"; 

    angular.module('myApp').factory('PubSub', PubSub); 
    PubSub.$inject = ['$rootScope']; 

    function PubSub($rootScope) { 
     var service = {}; 

     service.subscribe = function(eventname, callback) { 
      $rootScope.$on(eventname, callback); 
     } 

     service.publish = function(eventname) { 
      var args = Array.prototype.slice.call(arguments, 1); 
      var argv = { 
       argv: args 
      }; 
      $rootScope.$emit(eventname, argv); 
     } 

     service.unsubscribe = function(handler) { 
      handler(); 
     } 

     return service; 
    } 

    angular.module('myApp').controller('MyCtrl', MyCtrl); 
    MyCtrl.$inject = ['$scope', 'PubSub']; 

    function MyCtrl($scope, PubSub) { 
     $scope.callBackend1 = function(event) { 
      console.log('Check1') 
      PubSub.publish('date1', 'start1', 'end1') 
      // here call to backend, if possible do with $http service 
     } 
     $scope.callBackend2 = function(event) { 
      console.log('Check2') 
      PubSub.publish('date2', 'start2', 'end2') 
      // here call to backend, if possible do with $http service 
     } 
    } 

    angular.module('myApp').controller('Date1Ctrl', Date1Ctrl); 
    Date1Ctrl.$inject = ['$scope', 'PubSub']; 

    function Date1Ctrl($scope, PubSub) { 

     PubSub.subscribe('date1', date1Changed); 

     function date1Changed(args) { 
      // Do your actions here 
     } 
    } 

    angular.module('myApp').controller('Date2Ctrl', Date2Ctrl); 
    Date2Ctrl.$inject = ['$scope', 'PubSub']; 

    function Date2Ctrl($scope, PubSub) { 
     PubSub.subscribe('date2', date2Changed); 

     function date2Changed(args) { 
      // Do your actions here 
     } 
    } 

})(angular);