Question

有没有办法访问 #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） 行出现错误。这是我得到null的地方。

有趣的是，如果我换掉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());
    });
 };

CONTROLLER

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;
};

Answer 1

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

应该是这样的，

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

希望这会让人欢呼。

Angular Bootstrap UI模式 - ng-tempate脚本中的访问ID

1 个答案: