Question

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

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文件中有多个daterangepickers时，如何知道选择了哪个日期范围选择器。并且根据为特定日期选择器选择的日期，我需要将日期范围传递给特定的角度控制器。请指教。

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

Answer 1

＆＃13;

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)
    })
  }

＆＃13;

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

＆＃13;

Answer 2

不要使用广播，因为它向下传播到嵌套控制器，并不能保证所有孩子都会收到该通知。而是编写一个在发布时发出事件的服务，您可以在任何控制器中订阅该事件。在MyCtrl中，您可以为每个日期范围选择器更改/选择事件分配不同的范围函数，如J Jin所指出的那样。

;(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);

如何使用多个广播根据用户选择调用角度控制器

2 个答案: