Угловые часы не срабатывают

Question

$ часы не срабатывают, тогда я меняю свой датпикер. Зачем?

Обновление: Я заметил, что мой отъезд и returnDate не меняются, когда я выбираю новую дату. Что может быть причиной?

var app = angular.module("fly"); 

(function(){ 

    function Controller($scope, searchData) { 



     $scope.$watch('departDate', function(newValue, oldValue){ 

      $scope.departDate = newValue; 
      searchData.setDateFrom(newValue); 

      if(searchData.getDateFrom() > searchData.getDateTo()) { 
       searchData.setDateFrom(newValue); 
       searchData.setDateTo(newValue); 
       $scope.returnDate = newValue; 

      } 

     }); 

     $scope.$watch('returnDate', function(newValue, oldValue){ 

      $scope.returnDate = newValue; 
      searchData.setDateTo(newValue); 

      if(searchData.getDateFrom() > searchData.getDateTo()) { 
       searchData.setDateFrom(newValue); 
       searchData.setDateTo(newValue); 
       $scope.departDate = newValue; 
      } 

     }); 


     $scope.datePickerStates = { 
      open1:false, 
      open2:false 
     }; 

     $scope.open = function($event, opened) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 

      $scope.datePickerStates[opened] = true; 
     }; 


     $scope.today = function() { 
      $scope.dt = new Date(); 
     }; 
     $scope.today(); 

     $scope.clear = function() { 
      $scope.dt = null; 
     }; 

     $scope.toggleMin = function() { 
      $scope.minDate = $scope.minDate ? null : new Date(); 
     }; 
     $scope.toggleMin(); 

     $scope.dateOptions = { 
      formatYear: 'yyyy', 
      startingDay: 1 
     }; 

     $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = $scope.formats[0]; 

    } 

    app.controller('DatePickerController', Controller); 


})(); 

HTML:

<div class="col-md-2"> 
     <div class="input-group"> 
      <input type="text" class="form-control" datepicker-popup="{{format}}" min-date="minDate" ng-model="departDate" is-open="datePickerStates.open1" ng-required="true" close-text="Close" /> 
      <span ng-click="open($event, 'open1')" class="btn btn-default input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 

    </div> 

    <div class="col-md-2"> 
     <div class="input-group"> 
      <input type="text" class="form-control" datepicker-popup="{{format}}" min-date="minDate" ng-model="returnDate" is-open="datePickerStates.open2" ng-required="true" close-text="Close" /> 
      <span ng-click="open($event, 'open2')" class="btn btn-default input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 

UPDATE:

Это где я объявляю мои вложенные контроллеры и с помощью директив.

<div ng-controller="DatePickerController"> 
    <div ng-controller="PassengerController as pd"> 
     <div ng-controller="PlaceController as pc"> 
      <search-bar-md></search-bar-md> 
      <search-bar-sm></search-bar-sm> 
      <search-bar-xs></search-bar-xs> 

      <pre>{{departDate}}</pre> 
      <pre>{{returnDate}}</pre> 

     </div> 
    </div> 
</div> 

app.js

var app = angular.module("fly", ['ui.bootstrap', 'ngAnimate']); 


app.factory('searchData', function() { 

    var data = { 
     travelFrom: '', 
     travelTo: '', 
     dateToday: new Date(), 
     dateFrom: new Date(), 
     dateTo: new Date() 
    }; 

    return { 
     getTravelFrom : function() { 
      return data.travelFrom; 
     }, 
     setTravelFrom : function(travelFrom){ 
      data.travelFrom = travelFrom; 
     }, 
     getTravelTo : function(){ 
      return data.travelTo; 
     }, 
     setTravelTo : function(travelTo){ 
      data.travelTo = travelTo; 
     }, 
     /*** Travel dates ***/ 
     getTodayDate : function(){ 
      return data.dateToDay; 
     }, 
     getDateFrom : function(){ 
      return data.dateFrom; 
     }, 
     setDateFrom : function(dateFrom){ 
      data.dateFrom = dateFrom; 
     }, 
     getDateTo : function(){ 
      return data.dateTo; 
     }, 
     setDateTo : function(dateTo){ 
      data.dateTo = dateTo; 
     } 

    }; 
}); 




app.directive('navBar', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'templates/navbar/navbar.html' 
    }; 
}); 


app.directive('searchBar', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'templates/search-bar/search-bar.html' 
    }; 
}); 

app.directive('searchBarMd', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'templates/search-bar/search-bar-md.html' 
    }; 
}); 

app.directive('searchBarSm', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'templates/search-bar/search-bar-sm.html' 
    }; 
}); 

app.directive('searchBarXs', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'templates/search-bar/search-bar-xs.html' 
    }; 
}); 

Answer 1

Создание объекта-оболочки должны решить его: http://plnkr.co/edit/o8iwrVIYJq9wG74f0uR0?p=preview

Основное изменение добавляет объект обертку в DatePickerController:

$scope.dates = {} 

Затем использовать этот объект для хранения даты:

<div ng-controller="DatePickerController"> 
    <div class="col-md-2"> 
     <div class="input-group"> 
      <input type="text" class="form-control" datepicker-popup="{{format}}" min-date="minDate" ng-model="dates.departDate" is-open="datePickerStates.open1" ng-required="true" close-text="Close" /> 
      <span ng-click="open($event, 'open1')" class="btn btn-default input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 

    </div> 

    <div class="col-md-2"> 
     <div class="input-group"> 
      <input type="text" class="form-control" datepicker-popup="{{format}}" min-date="minDate" ng-model="dates.returnDate" is-open="datePickerStates.open2" ng-required="true" close-text="Close" /> 
      <span ng-click="open($event, 'open2')" class="btn btn-default input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div> 
    </div> 
</div> 

Причина, по которой это происходит, заключается в том, что ng-model заменяет экземпляры ссылочных объектов другими. Каждый контроллер имеет свою собственную область действия, но наследует от нее родительскую область, но при использовании вложенных контроллеров с ng-моделью изменяется только объект промежуточной суммы $ scope. Например, если мы имеем controller1 и вложенную controller2:

//Initial state: 
controller1Scope.property='initial' 
controller2Scope.property='initial' //Inherited from controller1 scope 

//After ng-model="property" input is changed to 'new_value': 
controller1Scope.property='initial' 
controller2Scope.property='new_value' 

Если вы используете объект-оболочку, то он совместно во всех областях, и когда некоторые из его свойств изменяется, это влияет на все из них:

//Initial state: 
controller1Scope.wrapper={property:'initial'} 
controller2Scope.wrapper={property:'initial'} //Inherited from controller1 scope 

//After ng-model="wrapper.property" input is changed to 'new_value': 
controller1Scope.wrapper={property:'new_value'} 
controller2Scope.wrapper={property:'new_value'} //Inherited from controller1 scope 

Answer 2

Initialize $scope.departDate и $scope.returnDate в контроллере со значением некоторого умолчанию.
JS:

function Controller($scope, searchData) { 
    $scope.departDate = ''; //you can set your own default value 
    $scope.returnDate = ''; //you can set your own default value 
... }