datepicker внутри модального не работает

Я пытаюсь использовать компоненты ui-bootstrap, чтобы сделать datepicker внутри модального. Datepicker должен отправить назад дату, отформатированную как временная метка unix.datepicker внутри модального не работает

это работает нормально, если DatePicker не находится внутри модального (= обновления меток времени при выборе даты): http://plnkr.co/edit/xQFmVgJojiq6aG9U8f4H?p=preview
тогда, я поставил директиву внутри модального: http://plnkr.co/edit/9zHQQPGAcomT5Vha33j3?p=preview

здесь контроллеры:

.controller('MyCtrl', [ '$scope', '$modal', function ($scope, $modal) { 
    $scope.open = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'tplModal.html', 
      controller: 'MyModalCtrl' 
     }); 
    }; 
}]) 
.controller('MyModalCtrl', [ '$scope', '$modalInstance', function ($scope, $modalInstance) { 
    $scope.required= {}; 
    $scope.disabled = function(date, mode) { 
     return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); 
    }; 
    $scope.minDate = new Date(); 
    $scope.$watch('dt', function() { 
     if ($scope.dt) $scope.required.timestamp = Math.floor($scope.dt.getTime()/1000); 
     console.log('timestamp: ', $scope.required.timestamp, '/ dt: ', $scope.dt); 
    }); 
    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]);

и шаблон HTML модальный:

<div class="modal-body"> 
    <div ng-model="dt"> 
     <datepicker min="minDate" show-weeks="false"></datepciker> 
    </div> 
    <div> 
     dt <span class="uneditable-input span2">{{dt | date:'dd.MM.yyyy' }}</span> 
     dt <span class="uneditable-input span2">{{ dt }}</span> 
     timestamp <span class="uneditable-input span2">{{ required.timestamp }}</span> 
    </div> 
</div>

В этой 2-е версии метка время не обновляется при изменении даты (это походит на $ часы не работают).

Вы знаете, как это сделать?

источник

2013-10-24 François Romain

Если бы я должен был догадаться, что вы столкнулись с проблемой сферы; где модальный создает подкласс контроллера. Я столкнулся с этим, используя ng-include. Я не вижу, где определяется ваш dt; но мое решение [в моем случае] заключалось в том, чтобы поместить мое «простое значение» в объект контроллера, чтобы он был доступен в подпункте. [простые свойства не были унаследованы; но объекты были]. – JeffryHouser

Вы должны использовать знаменитую «точку» в выражении ng-model, так как $ modal создает область trasclusion для содержимого окна. Другими словами, существует область, созданная между вашим контроллером и содержимым модала.

Во всяком случае, используя точку в выражении ng-model (что является лучшей практикой) решает эту проблему для вас:

<div ng-model="dt.value"> 
    <datepicker min="minDate" show-weeks="false"></datepciker> 
</div>

и в JavaScript:

$scope.dt = {}; 
$scope.$watch('dt.value', function(newValue) { 
    if (newValue) $scope.required.timestamp = Math.floor(newValue.getTime()/1000); 
    console.log('timestamp: ', $scope.required.timestamp, '/ dt: ', newValue); 
});

Рабочая шлепнуть здесь: http://plnkr.co/edit/Adst8I8S0e0DLcVnhpLq?p=preview

источник

2013-10-24 17:38:25

+1 от меня; Я думаю, что мой комментарий был на правильном пути ... – JeffryHouser

Вам необходимо применить тот же трюк, который вы сделали для timestamp, и поместить его в объект в области, как я сделал here.

$scope.picker = { 
    dt: new Date(), 
    timestamp: '' 
};

источник

2013-10-24 17:43:06

datepicker внутри модального не работает

ответ

Смежные вопросы