javascript - 使用动态创建的 HTML 从 angularjs 控制器调用函数
问题描述
我正在使用Google Maps API为我的 API 返回的地址创建地图标记列表。我希望信息窗口有一个从控制器调用函数的按钮,但由于某种原因,ng-click
它根本没有做任何事情。
我试过使用$compile
,但没有任何运气。这是我的控制器的样子:
drivingApp.controller('MapController', ['$resource', '$scope', '$window', '$http', '$compile', function($resource, $scope, $window, $http, $compile) {
$scope.testPrint = function () {
console.log('Test')
};
$scope.initMap = function () {
console.log(sessionStorage.getItem('user-token'));
$http.defaults.headers.common['Authorization'] = 'JWT ' + sessionStorage.getItem('user-token');
$http.get('my_api_url') // Request currently available properties
.then(function (response) {
$scope.allPropertyList = response.data; // Put server response in scope
var mapCenter = {lat: 29.3568, lng: -98.494738}; // Center the map in the middle of the city
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 9
});
var marker, i;
for (i = 0; i < $scope.allPropertyList.length; i++) {
// Get latitude and longitude for each property returned by the API
var latitude = parseFloat($scope.allPropertyList[i]['property_latitude']);
var longitude = parseFloat($scope.allPropertyList[i]['property_longitude']);
var property_address = $scope.allPropertyList[i]['property_address'];
/*
Create content for the info window of the map marker.
Allow the user to select properties from the map itself.
*/
var contentString = '<h1 style="font-size: 18px">' + property_address + '</h1>'
+'<div>'
+'<a id="selectFromMapButton" ng-click="testPrint()" class="c-btn" style="color: white">Select Property</a>'
+'</div>';
$compile(contentString)($scope);
createMarker(i);
}
function createMarker(i) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
});
};
}]);
我想testPrint
通过点击地图标记的信息窗口来打电话。我怎样才能做到这一点?
解决方案
让我知道这个是否奏效。为了简单起见,我更改了for
循环中的一些地图逻辑并删除了该createMarker
功能。如果需要,您应该可以将其重新添加。
for (i = 0; i < $scope.allPropertyList.length; i++) {
// Get latitude and longitude for each property returned by the API
var latitude = parseFloat($scope.allPropertyList[i]['property_latitude']);
var longitude = parseFloat($scope.allPropertyList[i]['property_longitude']);
var property_address = $scope.allPropertyList[i]['property_address'];
/*
Create content for the info window of the map marker.
Allow the user to select properties from the map itself.
*/
// Add the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude , longitude),
map: $scope.map
});
// Build the content string
var contentString = '<h1 style="font-size: 18px">' + property_address + '</h1>'
+'<div>'
+'<a id="selectFromMapButton" ng-click="testPrint()" class="c-btn" style="color: white">Select Property</a>'
+'</div>';
// Compile the contentString
var compiledContent = $compile(contentString)($scope)
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Add the event listener and open info window.
google.maps.event.addListener(marker, 'click', (function(marker, contentString, scope, infowindow) {
return function() {
infowindow.setContent(contentString);
infowindow.open(scope.map, marker);
};
})(marker, compiledContent[0], $scope, infowindow));
}
推荐阅读
- sublimetext - Sublime Text:在“替换”功能中禁用刷新/替换?
- laravel - 将路由绑定到 laravel7 中的方法(控制器)
- google-cloud-platform - 谷歌云构建:即使用 ls 显示也找不到简单的测试文件
- php - 单击事件视图后未显示数据
- output - 计算 CNN 中的输出大小
- javascript - 表单不验证输入
- ubuntu - 设置本地提名服务器时出现权限错误
- vb.net - 自动处理 DateTimePIcker 中的空值
- ruby-on-rails - RSpec Rails 邮件期望 - 最后一次交付是特定的操作/方法/模板
- php - laravel ORM 模型在所有请求中显示相同的值