Как связать сборщик данных (специальная директива AngularJS) с поведением AngularUI-Select2?

Question

Я использую

1. Angular UI - Select2 directive, чтобы показать окно опций.
2. Bootstrap Date-Range Picker показать Date Picker

Оба они работают хорошо индивидуально.

Рабочая ловильного Дата

Всякий раз, когда изменяется диапазон дат, новые данные пересылаются через AngularJS. Это код:

HTML

<div ng-app="my-app" ng-controller="MyController"> 

    <div id="reportrange" class="reportrange" 
     my-date-picker="changeDate($startDate, $endDate)"> 
     <span></span> 
    </div> 

</div> 

Угловое сценарий

//directive code 
    var mod = angular.module('my-app', ['ngResource', 'ui']); 

    mod.directive('myDatePicker', function ($timeout) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attr) { 
       $(element).daterangepicker({ 
        //options now shown for brevity 
       }, function (startDate, endDate) { 
        $('#reportrange span').html(startDate.toString('MMMM d, yyyy') + ' - ' + endDate.toString('MMMM d, yyyy')); 

        var fStartDate = moment(startDate).format('YYYY-MM-DD'); 
        var fEndDate = moment(endDate).add('days', 1).format('YYYY-MM-DD'); 

        scope.$eval(attr.myDatePicker, {$startDate: fStartDate, $endDate: fEndDate}); 

       }); 

       var inEndDate = Date.today(); 
       var inStartDate = Date.today().add({ days: -29 }); 
       //Set the initial state of the picker label 
       $('#reportrange span').html(inStartDate.toString('MMMM d, yyyy') + ' - ' + inEndDate.toString('MMMM d, yyyy')); 
      } 
     }; 
    }); 

//Controller code 
function MyController($scope, $resource, $timeout) { 
    var inEndDate = moment(Date.today()).format('YYYY-MM-DD'); 
    var inStartDate = moment(Date.today().add({ days: -29 })).format('YYYY-MM-DD'); 
    var User = $resource('/fetch?from=:from&to=:to', {from: inStartDate, to: inEndDate}, { 
     getAll: {method: 'GET', isArray: true} 
    }); 

    $scope.changeDate = function(fromDate, toDate) { 
     $scope.customers = User.getAll({from: fromDate, to: toDate}); 
    }; 

    $scope.customers = User.getAll(); 
} 

Это работает отлично. Я получаю customers список для выбранного диапазона (извлекаться через $ ресурса каждый диапазон изменяется)

Working в Выбор2 AngularUI

<select ui-select2 ng-model="selectedCity" >   
    <option value="1">City1</option> 
    <option value="2">City2</option>  
    <option value="3">City3</option>   
</select> 

Это также работает отлично.

Требование состоит в том, чтобы всякий раз, когда выбран вариант (например, 2-й вариант, City2), я хочу получить список customers для выбранного диапазона для City2. И в то время как City2 выбран, пользователь может также изменить диапазон дат и получить новый список значений customers.

Итак, я зациклился на том, как связать сборщик Datetime и варианты выбора? Пожалуйста, направляйте меня.

Я застрял. :(

Answer 1

Добавить в контроллер.

$scope.$watch('selectedCity', function(newVal, oldVal){ 
    if(newVal){ 
    $scope.customers = User.getAll({from: fromDate, to: toDate, city: newVal}); 
} 
}); 

эта функция будет выполняться при изменении selectedCity и вы можете получить клиентов. Кроме того, необходимо сохранить выбранные даты начала и окончания в объекте $ Scope (в пределах $scope.changeDate).