范围不发送数据到 html
the scope doesn't send data to html
我给我的地图提供了纬度和经度,但地图上没有。
谁能帮忙?
图片 1:
图二:
这是控制器:
angular.module('todoController', ['ngMap' , 'firebase'])
// inject the Todo service factory into our controller
.controller('mainController', ['$scope' , '$firebaseArray' , function($scope , $firebaseArray ,NgMap , $timeout ) {
// check the ng-map docs for api url and api key
$scope.mapsApiUrl = 'AIzaSyA3ZMA6KlxboXRuA7ItNNSlJp3xcgjaB0M';
$scope.$onInit = onInit;
初始化地图的函数 onInit
function onInit() {
NgMap.getMap().then(function (mapInstance) {
var center = mapInstance.getCenter();
google.maps.event.trigger(mapInstance, 'resize');
mapInstance.setCenter(center);
$timeout(function () {
$scope.map = mapInstance;
});
}) ; }
firebase 参考资料
// CREATE A FIREBASE REFERENCE
var config = {
apiKey: "AIzaSyAKoDxaWtWmvnDAvMBwddPeGt16gRPzALg",
authDomain: "trackeur-backend.firebaseapp.com",
databaseURL: "https://trackeur-backend.firebaseio.com",
projectId: "trackeur-backend",
storageBucket: "trackeur-backend.appspot.com",
messagingSenderId: "981610558503"
};
firebase.initializeApp(config);
这是 运行 应用
的功能
$scope.addTodo = function () {
var lat = firebase.database().ref().child('coordinates').child('lat');
var lon = firebase.database().ref().child('coordinates').child('lon');
setInterval(() => {
lat.on("value", function(snapshot) {
// This isn't going to show up in the DOM immediately, because
// Angular does not know we have changed this in memory.
// $scope.data = snapshot.val();
// To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
$scope.$apply(function() {
$scope.data = snapshot.val();
});
});
lon.on("value", function(snapshot) {
// This isn't going to show up in the DOM immediately, because
// Angular does not know we have changed this in memory.
// $scope.data = snapshot.val();
// To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
$scope.$apply(function() {
$scope.data1 = snapshot.val();
});
});
// here I provide the latitude and longitude to my map
console.log($scope.data +' , '+ $scope.data1 ) ;
$scope.coord ={
lat: $scope.data ,
lon: $scope.data1
} ;
}, 1000);
};
我的问题是我从 firebase 获取了纬度和经度,但是当我将它们发送到我的 HTML 它没有标记我得到的坐标,实际上它根本没有移动,这是标记:
<marker position="[{{$coord.lat}} , {{$coord.lon}}] " icon="car2.png"></marker>
一个属性里面最好只用一个双大括号,{{ }}
,interpolation:
<marker position="{{'['+data+','+data1+']'}}" icon="car2.png">
</marker>
这减少了模板中观察者的数量。
还使用从异步块中应用的 $scope
变量。
我给我的地图提供了纬度和经度,但地图上没有。 谁能帮忙?
图片 1:
图二:
这是控制器:
angular.module('todoController', ['ngMap' , 'firebase'])
// inject the Todo service factory into our controller
.controller('mainController', ['$scope' , '$firebaseArray' , function($scope , $firebaseArray ,NgMap , $timeout ) {
// check the ng-map docs for api url and api key
$scope.mapsApiUrl = 'AIzaSyA3ZMA6KlxboXRuA7ItNNSlJp3xcgjaB0M';
$scope.$onInit = onInit;
初始化地图的函数 onInit
function onInit() {
NgMap.getMap().then(function (mapInstance) {
var center = mapInstance.getCenter();
google.maps.event.trigger(mapInstance, 'resize');
mapInstance.setCenter(center);
$timeout(function () {
$scope.map = mapInstance;
});
}) ; }
firebase 参考资料
// CREATE A FIREBASE REFERENCE
var config = {
apiKey: "AIzaSyAKoDxaWtWmvnDAvMBwddPeGt16gRPzALg",
authDomain: "trackeur-backend.firebaseapp.com",
databaseURL: "https://trackeur-backend.firebaseio.com",
projectId: "trackeur-backend",
storageBucket: "trackeur-backend.appspot.com",
messagingSenderId: "981610558503"
};
firebase.initializeApp(config);
这是 运行 应用
的功能 $scope.addTodo = function () {
var lat = firebase.database().ref().child('coordinates').child('lat');
var lon = firebase.database().ref().child('coordinates').child('lon');
setInterval(() => {
lat.on("value", function(snapshot) {
// This isn't going to show up in the DOM immediately, because
// Angular does not know we have changed this in memory.
// $scope.data = snapshot.val();
// To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
$scope.$apply(function() {
$scope.data = snapshot.val();
});
});
lon.on("value", function(snapshot) {
// This isn't going to show up in the DOM immediately, because
// Angular does not know we have changed this in memory.
// $scope.data = snapshot.val();
// To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
$scope.$apply(function() {
$scope.data1 = snapshot.val();
});
});
// here I provide the latitude and longitude to my map
console.log($scope.data +' , '+ $scope.data1 ) ;
$scope.coord ={
lat: $scope.data ,
lon: $scope.data1
} ;
}, 1000);
};
我的问题是我从 firebase 获取了纬度和经度,但是当我将它们发送到我的 HTML 它没有标记我得到的坐标,实际上它根本没有移动,这是标记:
<marker position="[{{$coord.lat}} , {{$coord.lon}}] " icon="car2.png"></marker>
一个属性里面最好只用一个双大括号,{{ }}
,interpolation:
<marker position="{{'['+data+','+data1+']'}}" icon="car2.png">
</marker>
这减少了模板中观察者的数量。
还使用从异步块中应用的 $scope
变量。