angular-google-地图无法使用不是 text/ng-template 的 templateUrl
angular-google-maps not working with templateUrl that isn't a text/ng-template
我正在使用 angular-google-maps 指令。我正在使用 ui-boostrap 模态来显示地图。我在名为 mapSelectLocation.html 的文件中定义了模态内容。这是我打开模式的方式:
var modalInstance = $modal.open({
templateUrl: '/path/to/templates/mapSelectLocation.html',
controller: 'mapSelectLocationController'
});
mapSelectLocation.html:
<div class='modal-body'>
<ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'> </ui-gmap-google-map>
</div>
mapSelectLocationController:
function mapSelectLocationController($scope, $modalInstance) {
$scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
$scope.readyForMap = true;
}
这会显示弹出窗口并适当地呈现地图。但是,当我关闭模式并重新打开它时,地图无法正确呈现。大部分地图区域显示为灰色,只有一小部分地图在左上角可见。
但是,如果我将 mapSelectLocation.html 的内容从文件本身移动到同一页面上的 angular 模板脚本中,它可以正常打开和重新打开,每次都能正确呈现:
<script type="text/ng-template" id="mapSelectLocation.template">
<div class='modal-body'>
<ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'> </ui-gmap-google-map>
</div>
</script>
当然还要更新 templateUrl:
var modalInstance = $modal.open({
templateUrl: 'mapSelectLocation.template',
controller: 'mapSelectLocationController'
});
有人可以告诉我为什么将模态内容放在单独的文件中不起作用吗?我宁愿将它分开,也不愿使用 angular 脚本模板。
找到解决办法。 Angular-Google-Maps 提供 uiGmapIsReady 服务,让您知道 ui-map 何时准备就绪。使用此承诺,您可以传递一个回调函数,该函数允许您访问地图的控件 属性,该控件具有可用的 refresh() 函数,它将刷新地图。这允许刷新地图,在随后的模式打开时正确渲染它。
这是一个示例解决方案:
var module = angular.module('test', ['ui.bootstrap', 'uiGmapgoogle-maps']);
module.controller('controllerA', ['$scope', '$modal', 'uiGmapIsReady', controllerA]);
module.controller('mapSelectLocationController', ['$scope', '$modalInstance', 'uiGmapIsReady', mapSelectLocationController]);
function controllerA($scope, $modal, uiGmapIsReady) {
$scope.openMapDialog = function () {
var modalInstance = $modal.open({
templateUrl: '/app/mapTemplate.html',
controller: 'mapSelectLocationController'
});
modalInstance.result.then(function (test) {
debugger;
});
}
}
function mapSelectLocationController($scope, $modalInstance, uiGmapIsReady) {
$scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
$scope.readyForMap = true;
$scope.control = {};
uiGmapIsReady.promise().then(function (maps) {
$scope.control.refresh();
});
}
module.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
和模板:
<div class="modal-body">
<h4>Click a location on the map</h4>
<hr />
<div class="row">
<ui-gmap-google-map center='map.center' control='control' zoom='map.zoom'></ui-gmap-google-map>
</div>
<h4>Available Addresses</h4>
<hr />
<div class="row">
<div class="grid no-border">
<div class="grid-body">
Addresses will be listed here...
</div>
</div>
</div>
对于 angular google 地图 v2 及以下版本,请参阅此 SO 答案:
How to wait for Angular Google Maps to append getGMap to the control object
从 v2 开始,基本上使用 uiGmapIsReady.
我正在使用 angular-google-maps 指令。我正在使用 ui-boostrap 模态来显示地图。我在名为 mapSelectLocation.html 的文件中定义了模态内容。这是我打开模式的方式:
var modalInstance = $modal.open({
templateUrl: '/path/to/templates/mapSelectLocation.html',
controller: 'mapSelectLocationController'
});
mapSelectLocation.html:
<div class='modal-body'>
<ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'> </ui-gmap-google-map>
</div>
mapSelectLocationController:
function mapSelectLocationController($scope, $modalInstance) {
$scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
$scope.readyForMap = true;
}
这会显示弹出窗口并适当地呈现地图。但是,当我关闭模式并重新打开它时,地图无法正确呈现。大部分地图区域显示为灰色,只有一小部分地图在左上角可见。
但是,如果我将 mapSelectLocation.html 的内容从文件本身移动到同一页面上的 angular 模板脚本中,它可以正常打开和重新打开,每次都能正确呈现:
<script type="text/ng-template" id="mapSelectLocation.template">
<div class='modal-body'>
<ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'> </ui-gmap-google-map>
</div>
</script>
当然还要更新 templateUrl:
var modalInstance = $modal.open({
templateUrl: 'mapSelectLocation.template',
controller: 'mapSelectLocationController'
});
有人可以告诉我为什么将模态内容放在单独的文件中不起作用吗?我宁愿将它分开,也不愿使用 angular 脚本模板。
找到解决办法。 Angular-Google-Maps 提供 uiGmapIsReady 服务,让您知道 ui-map 何时准备就绪。使用此承诺,您可以传递一个回调函数,该函数允许您访问地图的控件 属性,该控件具有可用的 refresh() 函数,它将刷新地图。这允许刷新地图,在随后的模式打开时正确渲染它。
这是一个示例解决方案:
var module = angular.module('test', ['ui.bootstrap', 'uiGmapgoogle-maps']);
module.controller('controllerA', ['$scope', '$modal', 'uiGmapIsReady', controllerA]);
module.controller('mapSelectLocationController', ['$scope', '$modalInstance', 'uiGmapIsReady', mapSelectLocationController]);
function controllerA($scope, $modal, uiGmapIsReady) {
$scope.openMapDialog = function () {
var modalInstance = $modal.open({
templateUrl: '/app/mapTemplate.html',
controller: 'mapSelectLocationController'
});
modalInstance.result.then(function (test) {
debugger;
});
}
}
function mapSelectLocationController($scope, $modalInstance, uiGmapIsReady) {
$scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
$scope.readyForMap = true;
$scope.control = {};
uiGmapIsReady.promise().then(function (maps) {
$scope.control.refresh();
});
}
module.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
和模板:
<div class="modal-body">
<h4>Click a location on the map</h4>
<hr />
<div class="row">
<ui-gmap-google-map center='map.center' control='control' zoom='map.zoom'></ui-gmap-google-map>
</div>
<h4>Available Addresses</h4>
<hr />
<div class="row">
<div class="grid no-border">
<div class="grid-body">
Addresses will be listed here...
</div>
</div>
</div>
对于 angular google 地图 v2 及以下版本,请参阅此 SO 答案: How to wait for Angular Google Maps to append getGMap to the control object 从 v2 开始,基本上使用 uiGmapIsReady.