我已经将Angular部署到我的Codigniter项目中，并且我已经将MapBox Leaflet部署到我的项目中，但它不适用于Firefox，我所做的我使用了范围和角度对象iFrame我用来加载mapbox地图视图。它可以在其他浏览器上无缝运行，但它不适用于Firefox。
这是我在控制台上出现的错误
警告：尝试多次加载角度。 angular.min.js（第206行） TypeError：a为null
<iframe width="100%" height="600px" src="URL/ADDRESS/TO/MAP/WHERE/I/REUSE/ANGULAR/AND/SCOPE/AGAIN" frameborder="0"></iframe>
<!DOCTYPE html>
https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'> https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css'的rel =＆＃39;样式表＆＃39; /＆GT; ＆＃34;类型=＆＃34;文本/ JavaScript的＆＃34;＆GT; https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.css'类型=＆＃39;文本/ CSS＆＃39; /＆GT; ＆＃34; /＆GT;
</head>
<body class="plugin-mapbox-driving-direction-mapview">
<section class="">
<div class="">
<div id='map'></div>
<div id='inputs'></div>
<div id='errors'></div>
<div id='directions'><div id='routes'></div><div id='instructions'></div></div>
<script>
var angular = window.parent.angular,
scope = window.parent.angular.element(window.frameElement).scope(),
initialization = true;
//console.log("angular", angular, "angular");
//console.log("scope", scope, "scope");
var startCoordinates = scope.__route[0],
endCoordinates = scope.__route[1];
var startLocation = {
lat: angular.isDefined(startCoordinates.lat) ? startCoordinates.lat : null,
lng: angular.isDefined(startCoordinates.lng) ? startCoordinates.lng : null,
loc: scope.pinOriginLocation
},
endLocation = {
lat: angular.isDefined(endCoordinates.lat) ? endCoordinates.lat : null,
lng: angular.isDefined(endCoordinates.lng) ? endCoordinates.lng : null,
loc: scope.pinDestinationLocation
},
origin = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [startLocation.lng, startLocation.lat]
},
properties: {
name: startLocation.loc
}
},
destination = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [endLocation.lng, endLocation.lat]
},
properties: {
name: endLocation.loc
}
};
L.mapbox.accessToken = "<?php echo $this->config->item('mapbox_api_accesstoken'); ?>";
var __journey = scope.__journey;
var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: false});
map.attributionControl.setPosition('bottomleft');
var directions = L.mapbox.directions();
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);
var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions).addTo(map);
var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions).addTo(map);
var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions).addTo(map);
var wayPoints = [];
if(angular.isDefined(scope.__journey.__route) && scope.__journey.__route.length > 2) {
for(var i in scope.__journey.__route) {
if(scope.__journey.__route.length <= 20 || (wayPoints.length <= 20 && Number(i)%(Math.round(scope.__journey.__route.length / 20)) == 0))
wayPoints.push(L.latLng(scope.__journey.__route[i].latitude,scope.__journey.__route[i].longitude));
}
}
console.log("wayPoints", wayPoints, "wayPoints");
setQuery(startLocation, true, origin, endLocation, true, destination, wayPoints);
//directions.setOrigin(origin, true).setDestination(destination, true).query(undefined, false);
scope.$watch("pinOriginLocation", function(newval, oldval) {
if(angular.isDefined(newval) && newval.length >= 20 && newval !== oldval) {
startCoordinates = scope.getCordinates(newval);
startLocation = {
lat: angular.isDefined(startCoordinates.lat) ? startCoordinates.lat : null,
lng: angular.isDefined(startCoordinates.lng) ? startCoordinates.lng : null,
loc: scope.pinOriginLocation
};
origin = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [startLocation.lng, startLocation.lat]
},
properties: {
name: startLocation.loc
}
};
initialization = false;
setQuery(startLocation, undefined, origin, endLocation, undefined, destination, wayPoints);
//directions.setOrigin(origin).setDestination(destination).query(undefined, false);
}
});
scope.$watch("pinDestinationLocation", function(newval, oldval) {
if(angular.isDefined(newval) && newval.length >= 20 && newval !== oldval) {
endCoordinates = scope.getCordinates(newval);
endLocation = {
lat: angular.isDefined(endCoordinates.lat) ? endCoordinates.lat : null,
lng: angular.isDefined(endCoordinates.lng) ? endCoordinates.lng : null,
loc: scope.pinDestinationLocation
};
destination = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [endLocation.lng, endLocation.lat]
},
properties: {
name: endLocation.loc
}
};
initialization = false;
setQuery(startLocation, undefined, origin, endLocation, undefined, destination, wayPoints);
//directions.setOrigin(origin).setDestination(destination).query(undefined, false);
}
});
function suggestLocation(event, element) {
var el = $(element);
if(el.val().length >= 8 && event.keyCode == 32) {
$.ajax({
type : "POST",
url : siteVars.ajaxUrl+"webservice/lookupAddress",
datatype : "html",
data : {
"code" : siteVars.csrfHash,
"address" : el.val()
},
success: function(data) {
lookup = [];
if(!angular.equals(data, "")) {
data = JSON.parse(data);
for(var i in data) {
if(typeof data[i].location != 'undefined')
lookup.push(data[i].location);
}
displaySuggestion(el, lookup);
}
}
});
}
};
function displaySuggestion(element, lookup) {
var attr = element.attr("id") + "DataList";
var html = "";
$("#"+attr).remove();
if(lookup.length > 0) {
for(var i in lookup)
html += "<div onclick='selectSuggestion(\""+element.attr("id")+"\", \""+lookup[i]+"\")' class='autocomplete-suggestion' data-index='"+i+"'>"+lookup[i]+"</div>";
html = "<div class='autocomplete-suggestions' id='"+attr+"'>"+html+"</div>";
$(html).insertAfter(element);
}
};
function selectSuggestion(element, suggestion) {
var el = $("#"+element);
el.val(suggestion);
$("#"+el.attr("id")+"DataList").remove();
if(el.attr("id") == "mapbox-directions-origin-input")
directions.setOrigin(suggestion);
if(el.attr("id") == "mapbox-directions-destination-input")
directions.setDestination(suggestion);
if(directions.queryable()) {
initialization = false;
directions.query({proximity: map.getCenter()}, false);
}
}
function setQuery(startLocation, startLocationStatus, origin, endLocation, endLocationStatus, destination, wayPoints) {
if(!angular.isDefined(startLocation.loc) || angular.equals(startLocation.loc, "") || angular.equals(startLocation.loc, null))
directions.setOrigin(L.latLng(startLocation.lat, startLocation.lng), true);
else
directions.setOrigin(origin, true);
if(!angular.isDefined(endLocation.loc) || angular.equals(endLocation.loc, "") || angular.equals(endLocation.loc, null))
directions.setDestination(L.latLng(endLocation.lat, endLocation.lng), true);
else
directions.setDestination(destination, true);
if(angular.isDefined(wayPoints) && wayPoints.length > 0)
directions.setWaypoints(wayPoints);
//L.Routing.control({waypoints:wayPoints}).addTo(map);
console.log("wayPoints", wayPoints, "wayPoints");
return directions.query(undefined, false);
}
</script>
</div>
<?=$this->load->view("subviews/libraries_link")?>
</section>
</body>