1

有没有办法在下面的表格中访问#title、#address、#category、#description、#latitude和#longitude？我一直在尝试使用document.getElementById(id)但每次都显示为 null 。Bootstrap UI 文档说模态实例需要包含在脚本标签中，但这可能是我的问题的原因吗？如果我的模态实例没有单独的控制器，它会对我有帮助吗？

我正在使用 Angular 1.6.1 和 Bootstrap UI。首先，我使用 Bootstrap UI创建一个$uibModal实例。模式打开后，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;
};
4

1 回答 1

1

当您创建 $uimodal 的实例时，您需要在相同的参数中也将作用域作为参数传递，以便您可以访问上述参数

应该是这样的

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

希望这能干杯。

于 2017-02-16T09:48:08.303 回答