Angular Bootstrap UI Modal — идентификатор доступа в скрипте ng-tempate

Есть ли способ получить доступ к #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">&times;</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;
};

person justinchanman    schedule 16.02.2017    source источник


Ответы (1)


когда вы создаете экземпляр $uimodal, в тех же параметрах вам нужно передать область действия в качестве параметра, чтобы вы могли получить доступ к вышеупомянутым параметрам.

Это должно быть что-то вроде этого,

var modalInstance = $uibModal.open({
        animation: this.animationsEnabled,
        templateUrl: 'bookmarkModal.html',
        controller: 'modalInstanceController',
        size: size,
        scope: $scope
    });

надеюсь, что это работает ура.

person Rishi Raj    schedule 16.02.2017