I am working on a directive that represents a person with changing location attributes. My goal is to access all the locations together and plot them on a map using the angular-leaflet-directive. I'm struggling to figure out how to access these variables in one place. Although I feel like I'm close to getting it working, I'm unsure which scope has access to all the directive's variables. Here is what I have so far:
Index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-resource.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller='MainCtrl'>
<a href='' class='btn' ng-click='addPerson()'>Add new person</a><Hr>
<div id='people'>
<person lat="0.0" lng="0.0"></person>
<person lat="0.0" lng="0.0"></person>
<person lat="0.0" lng="0.0"></person>
</div>
<hr>
<div class="map"> <!-- this will be a directive representing a map -->
How do I access the lat and lon of each directive here? So I can plot them all on a map (which is also a directive ...)
</div>
</body>
</html>
App.js
var app = angular.module('app', []);
app.directive('person', function ($compile, $timeout) {
function link ($scope, elem, attrs, ctrl) {
$scope.lat = attrs.lat;
$scope.lng = attrs.lng;
$timeout( function changePosition() {
console.log('Changing position ...');
$scope.lat = Math.random()
$scope.lng = Math.random()
$timeout(changePosition, 2000);
}, 2000);
}
return {
restrict: 'E',
replace: true,
template: "<span>Current Lat={{lat | number:2}}, Lng={{lng | number:2}}<br><br></span>",
link : link,
scope: {},
}
});
app.controller('MainCtrl', function ($scope, $compile) {
$scope.addPerson = function() {
console.log('Adding new person');
var lat = Math.random()
var lng = Math.random()
angular.element('#people').append($compile('<person lat="'+lat+'" lng="'+lng+'"></person>')($scope));
}
});