Angularjs: передать значение календаря из директивы в контроллер

Question

У меня есть эта система бронирования устройств, и у нее есть форма резервирования, которая включает поле с всплывающим календарем. Поскольку у меня есть этот всплывающий календарь внутри ng-repeat, я создал для него директиву, чтобы он работал.

Моя проблема, однако, в том, что я не смог передать значение календаря из директивы моему контроллеру, когда я сохраняю резервирование.

Как мне это сделать?

Вот функция сохранения:

$scope.Start = ""; 
 
$scope.saveReservation = function (newReservation, equipment) { 
 
       $scope.$emit('WORKING', true); 
 
       newReservation.EquipmentID = equipment.ID; 
 
       newReservation.StartDate = $scope.Start; 
 

 
       reservationService.addNew(newReservation) 
 
         .then(function (response) { 
 
          $scope.showReservationForm = false; 
 
          reservationService.getAll() 
 
          .then(function (response) { 
 
           $scope.reservations = response.d.results; 
 
           $scope.$emit('WORKING', false); 
 
           alert("Your reservation was succesful.") 
 
          }, function (reason) { 
 
           $scope.$emit('WORKING', false); 
 
           alert('You reservation failed because of error ' + reason); 
 
          }); 
 

 
         }); 
 
      };

Вот директива:

"use strict"; 
 
(function() { 
 
    angular.module("App").directive('myRepeatDirective', [ 
 
     function() { 
 
      return { 
 

 
       link: function (scope, element, attrs) { 
 
        if (scope.$last) { 
 
         $('.bootstrap-datepicker1').datepicker({ 
 
          format: "dd/mm/yyyy", 
 
          autoclose: true 
 
         }); 
 
         $('#bootstrap-datepicker1').on('change', function() { 
 

 
          scope.Start = $('#bootstrap-datepicker1').val() 
 
         }); 
 
         $('.bootstrap-datepicker2').datepicker({ 
 
          format: "dd/mm/yyyy", 
 
          autoclose: true 
 
         }); 
 
         $('#bootstrap-datepicker2').on('change', function() { 
 
          scope.End = $('#bootstrap-datepicker2').val() 
 
         }); 
 
        } 
 
       } 
 
      }; 
 
     }]) 
 
})();

А вот вх ут:

<input style="width: 200px;" type="text" class="bootstrap-datepicker1" id="bootstrap-datepicker1" data-ng-model="Start" placeholder=" dd.mm.yyyy" />

Answer 1

Используйте область применения. $ Применяются, чтобы угловые знали, что значение изменено вне угловой области. Другие угловые не знают, что значение изменилось.

$('#bootstrap-datepicker1').on('change', function() { 
    scope.$apply(function(){ 
     scope.Start = $('#bootstrap-datepicker1').val() 
    }) 
}); 

Answer 2

Используйте свойство 'Сфера' на объект определения директив.

https://docs.angularjs.org/guide/directive

Также вы можете найти этот ПОЛЕЗНЫЕ

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

С вашей директивы, впрыснуть $rootScope и сделать передачу, когда вы хотите передать данные:

$rootScope.$broadcast("calendarValue", {value: new Date(), foo: "bar"}); 

сейчас , в вашем контроллере получите значение, которое вы хотите получить:

$scope.$on("calendarValue", function(e, data) { 
    console.log(data.foo === "bar"); 
    $scope.selectedValue = data.value; 
});