I"m building a small app to test different possibilities for a demonstration. This app is a kind of personnal "Trip Advisor" for pubs in my area. For each pub, I store a name, a mark and its location.
I have 3 pages in the app :
- Displaying all pubs : pubList.html
- Adding a pub : addPub.html
- Showing one pub detail : pubDetail.html
I navigate from pubList to pubDetail by a simple click on the element. The pubDetail controler gets the pub index using $routeParams.
My goal is to display a googleMaps showing where the pub is, using the stored coordonates. Problem is, if the first pub is displayed perfectly, the second (when coming back to pubList and openning another pub) doesn't work. I had the idea to inject the index on the bar in the mapContainer div like this :
pubDetail Controleur
app.controller("pubDetailControler", function ($scope, $rootScope, $routeParams) {
//Local pub
$scope.localPub = $rootScope.pubList[$routeParams.index];
$scope.localPub.index = $routeParams.index;
}
pubDetail View
<div class="col-xs-12">
<h1>{{localPub.name}}</h1>
<div id="mapContainer-{{ localPub.index }}"></div>
</div>
Using the code explorer, I confirm the div Id is correctly set (mapContainer-0, mapContainer-1, ...) However, when I try to use a jQuery Selector on this div, it doesn't work. My theory is the div ID isn't yet set when the coed reaches the selector, failing it. My jQuery selector is as follow :
$("#mapContainer-" + $scope.localPub.index).css({ "width": "300px", "height": "300px", "background-color": "lightgrey" });
By the way, if my jQuery selector fails, the google maps instanciation fails as well :
var tmpMap = new google.maps.Map(document.getElementById('mapContainer-' + $scope.barLocal.index), [...]);
Does anyone have a idea how I can interact with this div ?
=====================================================
EDIT : here is the (simplified yet complete) code of the pubList and pubDetail elements. The code is in french, but it's small enough to be understood perfectly I think.
index.html
<!DOCTYPE html>
<html ng-app="monBarAdvisor">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src *">
<title>BarAdvisor</title>
<!—Feuilles de style -->
<link href="css/index.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<!-- Librairies externes -->
<script src="scripts/jquery-3.1.1.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/ng-cordova.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB2Czg7F2iw6Zz0JMebInmofW4e83aPsB8"></script>
<!-- Référence Cordova ajoutée à votre application une fois générée. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<!--Librairies personnelles-->
<script src="lib/index.js"></script>
<script src="lib/app.js"></script>
<script src="lib/controleurs/afficherBar.js"></script>
<script src="lib/controleurs/barsControleur.js"></script>
</head>
<body>
<!-- Menu -->
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="pull-left"><a href="#/">Tous</a></li>
<li class="pull-right"><a href="#/ajouteBar">Ajouter</a></li>
</ul>
</nav>
</div>
<!-- Contenu -->
<div>
<ng-view></ng-view>
</div>
</body>
</html>
app.js
var app = angular.module('monBarAdvisor', ['ngRoute','ngCordova']);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
"templateUrl": "vues/bars.html",
"controller": "barsControleur"
})
.when("/ajouteBar", {
"templateUrl": "vues/ajouterBar.html",
"controller": "ajouterBarControleur"
})
.when("/bar/:index", {
"templateUrl": "vues/afficherBar.html",
"controller": "afficherBarControleur"
})
.otherwise({ "redirectTo": "/" });
});
//Gestionnaire d'erreur
function errorHandler(pMessage) {
return function () { console.log(pMessage); }
}
pubList view, named here bars.html
<div ng-repeat="tmpBar in listeBars">
<a href="#/bar/{{ $index }}">
<div>
<p class="bar_nom">{{tmpBar.nom}}</p>
<p class="bar_note" ng-show="{{tmpBar.note==0}}">☆☆☆☆☆</p>
<p class="bar_note" ng-show="{{tmpBar.note==1}}">★☆☆☆☆</p>
<p class="bar_note" ng-show="{{tmpBar.note==2}}">★★☆☆☆</p>
<p class="bar_note" ng-show="{{tmpBar.note==3}}">★★★☆☆</p>
<p class="bar_note" ng-show="{{tmpBar.note==4}}">★★★★☆</p>
<p class="bar_note" ng-show="{{tmpBar.note==5}}">★★★★★</p>
</div>
</a>
</div>
pubList controler, named here barsControleur
app.controller("barsControleur", function ($scope, $rootScope, $route) {
$rootScope.listeBars = [
{"nom":"Milton Pub","note":"4","geolocation":{"lat":"45.8982901","long":"6.1223147"}},
{"nom":"Captain Pub","note":"4","geolocation":{"lat":"45.8984964","long":"6.1235909"}},
{"nom":"Le Grand Café","note":"2","geolocation":{"lat":"45.8983107","long":"6.121416"}}
];
$route.reload();
});
pubDetail view, named here afficherBar
<div class="col-xs-12">
<h1>{{barLocal.nom}}</h1>
<div class="barLocal_note" ng-show="{{barLocal.note==0}}">☆☆☆☆☆</div>
<div class="barLocal_note" ng-show="{{barLocal.note==1}}">★☆☆☆☆</div>
<div class="barLocal_note" ng-show="{{barLocal.note==2}}">★★☆☆☆</div>
<div class="barLocal_note" ng-show="{{barLocal.note==3}}">★★★☆☆</div>
<div class="barLocal_note" ng-show="{{barLocal.note==4}}">★★★★☆</div>
<div class="barLocal_note" ng-show="{{barLocal.note==5}}">★★★★★</div>
<div id="conteneurCarte-{{ barLocal.index }}"></div>
<div id="conteneurCarte"></div>
</div>
pubDetail controler, named here affiherBarControleur, the code at fault
app.controller("afficherBarControleur", function ($scope, $rootScope, $routeParams) {
//Bar local
$scope.barLocal = $rootScope.listeBars[$routeParams.index];
$scope.barLocal.index = $routeParams.index;
//Récupération de la carte via GoogleAPI
$scope.recupereCarteGoogleAPI = function () {
console.log('conteneurCarte-' + $scope.barLocal.index);
$("#conteneurCarte-" + $scope.barLocal.index).css({ "width": "300px", "height": "300px", "background-color": "lightgrey" });
$("#conteneurCarte").css({ "width": "300px", "height": "300px", "background-color": "green" });
}
if ($scope.barLocal.geolocation) {
$scope.recupereCarteGoogleAPI();
}
});
The console.log works great, but the .css() doesn't work a bit.
