I am currently using a Bootstrap Modal to open & display specific user Data. I have no problem with the user data (such as email, etc), but the maps are another story because all of the HTML is loaded so the Angular Leaflet Directive script tags are calling for data the moment the page loads. However, the selected user comes after a click. I tried the jQuery function to run data but no success.
My user list is created with a repeating Angular directive:
// inside the Modal "head" to link to modal content:
<tbody>
<tr dir-paginate="snap in chatData | orderBy:sortType:sortReverse | filter:q | itemsPerPage: pageSize" current-page="currentPage" data-toggle="modal" data-target="#myModal" ng-click="modalDetails(snap)">
<td>{{snap.requested_by}}</td>
<td>{{snap.created_at | date: 'fullDate'}}</td>
<td>{{snap.referrer_url || 'n/a'}}</td>
</tr>
</tbody>
The ng-click passes in "snap" which is the selected User (think of it as the Index). Each user's Snap is display OK, except for maps.
// inside the modal body tries to call the center & marker data before click:
<leaflet lf-center="center" markers="markers" height="240px" width="100%"></leaflet>
In my Angular JS file:
//a new $scope variable is created based on passing the "snap" value from HTML
//but its data doesn't get sent to the HTML <leaflet> lines prior to page load.
$scope.modalDetails = function(snap) {
$scope.selectedUser = snap
}
I'd like to create the equivalent to:
angular.extend($scope, {
center: {
lat: $scope.selectedUser.latitude,
lng: $scope.selectedUser.longtude,
zoom: 8
}
})
$scoper.markers[geo] = {
lat: $scope.selectedUser.latitude
lng: $scope.selectedUser.longitude
}
I appreciate any suggestions on this. Whether it's creating another ng-view or ng-include of a separate HTML file which contains the modal body. Or by running a new function that holds off the event until after click.
