![](/img/trans.png)
[英]Getting element position from the top of scrolled container div in Angularjs directive
[英]Getting Div id in angularjs directive
我有一个问题,在Angularjs指令中,在呈现模板之前首先调用控制器中的initialize()。 这意味着我无法检索动态ID。
我正在尝试为每个地图设置不同的ID,但由于动态ID,目前导致以下代码崩溃。
map = new google.maps.Map(document.getElementById('addressMap-' + $scope.mapId), mapOptions);
完整代码,有什么想法吗? 干杯
app.directive('googleMap', function ($compile) {
var mapId = 1;
var linker = function (scope, element) {
scope.mapId = mapId++;
};
return {
require: '^addressBasedGoogleMap',
restrict: "EA",
scope: {
address: "=",
zoom: "=",
mapId: "="
},
template : '<div id="addressMap-{{::mapId}}" style="height: 200px;"></div>',
link: linker,
controller: function ($scope) {
var geocoder;
var latlng;
var map;
var marker;
var initialize = function () {
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: $scope.zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('addressMap-' + $scope.mapId), mapOptions);
};
var markAdressToMap = function () {
geocoder.geocode({ 'address': $scope.address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
};
$scope.$watch("address", function () {
if ($scope.address != undefined) {
markAdressToMap();
}
});
initialize();
}
};
});
我会尝试将initialize()
推迟到$scope.mapId
存在。 一种方法是:
$scope.$watch('mapId', function(oldval, newval) {
if (!oldval && newval) {
initialize();
}
});
尝试任何一种。
解决方案1:
$scope.$$postDigest(function(){
initialize();
});
解决方案2
$timeout(initialize)
我会做这样的事情:
function waitForDiv() {
var elem = document.getElementById('addressMap-' + $scope.mapId);
if (typeof elem == 'undefined') {
$timeout(waitForDiv, 100);
}
}
function () {
geocoder = new google.maps.Geocoder();
latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: $scope.zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
waitForDiv();
map = new google.maps.Map(document.getElementById('addressMap-' + $scope.mapId), mapOptions);
};
一般而言,在指令和angular中,您希望在编译或任何内容之前引用元素,并避免在事后通过id在DOM中搜索它们。
如果创建将包含地图的元素,则可以避免$ timeout,您需要等待摘要-通过已经引用了该元素_map即可 。
这是一个笨蛋
var map_el = '<div id="map-{{mapId}}" class="map"></div>';
var _link = function(scope, el, attr, ctrl) {
var _map = $compile(map_el)(scope);
el.append(_map);
ctrl.addMap(scope, _map);
};
var _controller = function() {
var m = this;
m.addMap = function(scope, _map) {
...
new google.maps.Map(_map[0], mapOptions);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.