Есть ли способ получить доступ к #title, #address, #category, #description, # широта и #longitude в форме ниже? Я пытался использовать document.getElementById(id), но каждый раз он оказывается нулевым. В документах пользовательского интерфейса Bootstrap говорится, что модальные экземпляры должны быть заключены в теги script, но может ли это быть причиной моей проблемы? Помогло бы мне, если бы у меня не было отдельного контроллера для моего модального экземпляра?
Я использую Angular 1.6.1 и пользовательский интерфейс Bootstrap. Сначала я создаю экземпляр $uibModal с пользовательским интерфейсом Bootstrap. После открытия модального окна функция fillinform() анализирует информацию из Карт Google. Когда я перебираю словарь markerForm, возникают ошибки в строке var element = document.getElementById(key). Здесь я получаю ноль.
Интересно, что если я заменю теги сценария на теги div, модальное окно не будет работать.
Пожалуйста помоги! Спасибо!
HTML
<script type="text/ng-template" id="bookmarkModal.html">
<div class="modal-header" >
<h2 class="modal-title">Add Bookmark</h2>
<button type="button" class="close" id="close-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div id="group-modal-body" class="modal-body">
<form id="group-modal-form" ng-submit="addGroupMarker()">
<input type="text" class="form-control" id="title" placeholder="Title" ng-model="newGroupMarker.title" value="">
<input type="text" class="form-control" id="address" placeholder="Address" ng-model="newGroupMarker.address" value="">
<select class="form-control" id="category" placeholder="Category" ng-model="newGroupMarker.category" value="">
<option value="" disabled selected>Select A Category...(optional)</option>
<option value="Food">Food</option>
<option value="Shopping">Shopping</option>
<option value="Airport">Airport</option>
<option value="Hotel">Hotel</option>
</select>
<textarea type="textarea" class="form-control noresize" id="description" placeholder="Description" ng-model="newGroupMarker.description" value=""></textarea>
<input type="text" class="form-control" id="latitude" placeholder="Latitude" disabled="true" ng-model="newGroupMarker.latitude" value="">
<input type="text" class="form-control" id="longitude" placeholder="Longitude" disabled="true" ng-model="newGroupMarker.longitude" value="">
<input type="submit" class="btn btn-default" value="Add Marker">
</form>
</div>
</div>
</script>
МОДАЛЬНЫЙ
$scope.open = function (size) {
console.log("TEST");
var modalInstance = $uibModal.open({
animation: this.animationsEnabled,
templateUrl: 'bookmarkModal.html',
controller: 'modalInstanceController',
size: size,
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
КОНТРОЛЛЕР
var fillInForm = function(place) {
// Get the place details from the autocomplete object.
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var markerForm = {
title: place.name,
address: place.formatted_address,
latitude: lat,
longitude: lng
};
for (key in markerForm) {
var element = document.getElementById(key)
if(key == 'latitude' || key == 'longitude'){
document.getElementById(key).disabled = true;
} else {
document.getElementById(key).disabled = false;
}
var val = markerForm[key];
var elementAttr = element.getAttribute("value");
element.value = val;
elementAttr = val;
element.setAttribute("value", val)
}
$scope.markerForm = markerForm;
};