AngularJS modal with google map API

AngularJS modal with google map API

本文关键字：map API google with modal AngularJS      更新时间：2023-09-26

我的主页包含位置列表。在表格下方，有一个按钮，应该打开一个弹出窗口，其中包含用于添加新位置的表单。

此弹出窗口应包含一个谷歌地图，将显示输入的地址。

点击"创建新位置"

<button ng-click="CreateLocationPopup();" class="btn btn-xs btn-mercedes">@Labels.NewLocation</button>

调用函数

angular.module('App').controller("LocationController", ['$scope', '$modal',
function($scope, $modal) {
    $scope.CreateLocationPopup = function () {
        $modal.open({
            templateUrl: 'CreateLocation.html',
            size: 'lg'
        });
    };
}
]);

打开这个（放在带有位置表的主页上）

<script type="text/ng-template" id="CreateLocation.html">
     <event-location></event-location>
</script>

event-location指令只调用我的MVC控制器中的fonction，它只会调用PartialView。

在我的创建弹出窗口中，我有不同的字段和图像预览

<div id="img-canvas">
    <img id="img-preview" src="@Url.Content(pictureUrl)" alt="location image preview" style="max-width: 100%; max-height: 100%;" accept="image/*" />
</div>

<div id="map-canvas" style="height: 400px; width: 600px; margin-top: 60px; margin-left: auto; margin-right:auto;"></div>

问题是我需要在呈现页面时调用 2 个 javascript 函数，但在我的部分视图中调用它们不起作用（Javascript 没有触发）

 initializeLocationMap("map-canvas");
 previewImage("ImageBrowse", "img-preview");

除了谷歌地图图像外，所有字段都显示得很好

问题由我自己解决。这是我第一次使用directive.

我在event-location指令中添加了link

    link : function() {
        initializeLocationMap("map-canvas");
        previewImage("ImageBrowse", "img-preview");
    }
相关文章：