NgMap 未在 ngDialog 中呈现
NgMap not rendered in ngDialog
我有这个 ng-模板
<script type="text/ng-template" id="pushDialog">
<div class="col-md-12">
<div class="col-md-6">
<md-input-container class="md-block">
<input ng-model="pushLocName" type="text" ng-required="true" places-auto-complete on-place-changed="placeChanged()" aria-label="Location Name" types=['geocode'] required>
</md-input-container>
<md-input-container class="md-block" style="margin-top:0;">
<ng-map center="{{spark.location[1] || spark.lat}},{{spark.location[0] || spark.lng}}" zoom="8" default-style="false" >
<marker animation="DROP" position="{{pushPayload.location[1]}}, {{pushPayload.location[0]}}" draggable="true" on-dragend="getMarkerLocation()" animation="Animation.BOUNCE"></marker>
</ng-map>
</md-input-container>
</div>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button pull-left ngdialog-button-primary" ng-click="pushSpark()"> Confirm</button>
<button type="button" class="ngdialog-button pull-right ngdialog-button-secondary" ng-click="closeThisDialog('Cancel')"> Cancel</button>
</div>
它在点击时调用
<h5 ng-click="pushDialog()"><span class="pull-right glyphicon glyphicon-share"></span></h5>
函数是
$scope.pushDialog = function () {
ngDialog.closeAll();
ngDialog.open({
template: 'pushDialog',
className: 'ngdialog-theme-default',
scope: $scope
});
};
这实际上是在 angular 指令中。如果 ngMap 不在 ng-template 中而是在指令中,则它会正确呈现。我做错了什么?
我终于通过添加超时功能解决了问题。只有在 ngDialog 模态加载完成后才需要加载 ngmap。
<ng-map center="{{spark.location[1] || spark.lat}},{{spark.location[0] || spark.lng}}" zoom="8" ng-if="mapDisplay" >
<marker animation="DROP" position="{{pushPayload.location[1]}}, {{pushPayload.location[0]}}" draggable="true" on-dragend="getMarkerLocation()" animation="Animation.BOUNCE"></marker>
</ng-map>
和控制器函数
$scope.pushDialog = function () {
ngDialog.closeAll();
ngDialog.open({
template: 'pushDialog',
className: 'ngdialog-theme-default',
scope: $scope
});
$timeout(function(){
$scope.mapDisplay = true;
}, 500);
};
我有这个 ng-模板
<script type="text/ng-template" id="pushDialog">
<div class="col-md-12">
<div class="col-md-6">
<md-input-container class="md-block">
<input ng-model="pushLocName" type="text" ng-required="true" places-auto-complete on-place-changed="placeChanged()" aria-label="Location Name" types=['geocode'] required>
</md-input-container>
<md-input-container class="md-block" style="margin-top:0;">
<ng-map center="{{spark.location[1] || spark.lat}},{{spark.location[0] || spark.lng}}" zoom="8" default-style="false" >
<marker animation="DROP" position="{{pushPayload.location[1]}}, {{pushPayload.location[0]}}" draggable="true" on-dragend="getMarkerLocation()" animation="Animation.BOUNCE"></marker>
</ng-map>
</md-input-container>
</div>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button pull-left ngdialog-button-primary" ng-click="pushSpark()"> Confirm</button>
<button type="button" class="ngdialog-button pull-right ngdialog-button-secondary" ng-click="closeThisDialog('Cancel')"> Cancel</button>
</div>
它在点击时调用
<h5 ng-click="pushDialog()"><span class="pull-right glyphicon glyphicon-share"></span></h5>
函数是
$scope.pushDialog = function () {
ngDialog.closeAll();
ngDialog.open({
template: 'pushDialog',
className: 'ngdialog-theme-default',
scope: $scope
});
};
这实际上是在 angular 指令中。如果 ngMap 不在 ng-template 中而是在指令中,则它会正确呈现。我做错了什么?
我终于通过添加超时功能解决了问题。只有在 ngDialog 模态加载完成后才需要加载 ngmap。
<ng-map center="{{spark.location[1] || spark.lat}},{{spark.location[0] || spark.lng}}" zoom="8" ng-if="mapDisplay" >
<marker animation="DROP" position="{{pushPayload.location[1]}}, {{pushPayload.location[0]}}" draggable="true" on-dragend="getMarkerLocation()" animation="Animation.BOUNCE"></marker>
</ng-map>
和控制器函数
$scope.pushDialog = function () {
ngDialog.closeAll();
ngDialog.open({
template: 'pushDialog',
className: 'ngdialog-theme-default',
scope: $scope
});
$timeout(function(){
$scope.mapDisplay = true;
}, 500);
};