Show - Hide - AngularJs

[mauritosuarez]

Buenas, estuve dando vueltas con este problema y no pude dar con la solución ya que también estoy empezando a usar el maravilloso framework angularjs, estoy usando la libreria Onsen - components

Tengo un mapa, donde muestro varios puntos de interes, la idea es, al hacer click en un punto de interes, debajo del mapa me muestre el detalle de este punto, como por ejemplo las coordenadas, el titulo y el contenido. Paso a mostrar mi codigo.

codigo map.html

Código HTML:

<ons-navigator ng-controller="MapController">
   <ons-page>
       <ons-toolbar>
            <div class="left"><ons-back-button onclick="slidingMenu.setMainPage('settings.html')"></ons-back-button></div>
            <div class="center">
                MAPS
            </div>
       </ons-toolbar>
        
        <div id="map_canvas"></div>
 
        <!-- Acá iria el detalle al hacer click sobre un punto de interes en el mapa -->
        <div ng-show="false" id="detalle" style="margin-top: 6px; border: solid 1px #eee; width: 100%; height: 40%;">
            <ons-list>
                <ons-list-item modifier="chevron" class="list-item-container">
                  <div class="list-item-left">
                    <img src="images/pic.png" class="avator">
                  </div>
                  <div class="list-item-right">
                    <div class="list-item-content">
                      <div class="name">Daniel
                        <span class="lucent">@Danny</span>
                      </div>
                      <span class="desc">Hi, how are you? Glad to hear you are interested in our project.</span>
                    </div>
                  </div>
                </ons-list-item>
            </ons-list>
        </div>
    </ons-page>
</ons-navigator>
 

codigo controller.js

Código Javascript:

(function() {
    var app = angular.module('myApp', ['onsen']);
 
     //Map controller
    app.controller('MapController', function($scope, $timeout, $http){
 
        $scope.map;
        $scope.markers = [];
        $scope.markerId = 1;
        $scope.marker;
        $scope.geolocate;
        $scope.content;
        $scope.infowindow;
        $scope.positionFarm;
        $scope.contentFarm;
        $scope.responsePromise;
        $scope.url;
        $scope.datos = {};
          
        //Map initialization
        $timeout(function(){
         
            var myOptions = {
                zoom: 15,
                //center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            $scope.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
            navigator.geolocation.getCurrentPosition(function(position) {
        
                $scope.geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
                $scope.map.setCenter($scope.geolocate);
                
                function setMarker(map, position, title, content) {
                    var marker;
                    var markerOptions = {
                        position: position,
                        map: $scope.map,
                        title: title,
                        icon: 'images/pic.png'
                    };
 
                    $scope.marker = new google.maps.Marker(markerOptions);
                    $scope.markers.push($scope.marker); // add marker to array
 
                    google.maps.event.addListener($scope.marker, 'click', function () {
                       /*** Hasta acá puedo mostrar un alert con la posición y el titulo
                         * Lo que tendría que hacer es hacer visible el div id="detalle" con el detalle del punto
                         * de interes.
                         ***/
 
                        ons.notification.alert({
                            message: position + " " + title
                        });
                        
                        return;
                    });
                    
                }
                
                setMarker($scope.map, new google.maps.LatLng(-34.566653, -58.562298), 'Aberturas 3 de febrero', 'Aberturas 3 de frebreo, abierto 24hs');
                setMarker($scope.map, new google.maps.LatLng(-34.569494, -58.588517), 'Club hipico Gral. San Martín', 'Club hipico Gral. San Martín, abierto de lunes a viernes');
                setMarker($scope.map, new google.maps.LatLng(-34.557518, -58.581524), 'Farmacia la placita', 'Farmacia la placita, abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.565752, -58.575730), 'Farmacia Maipú', 'Farmacia Maipú, abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.559285, -58.568606), 'Farmacia av. 101 9 de julio', 'Farmacia 9 de julio, abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.561841, -58.569289), 'Farmacia Almirante', 'abierta 24hs.');
                setMarker($scope.map, new google.maps.LatLng(-34.612691, -58.534079), 'Farmacia villa raffo', 'Abierto las 24hs, para lo que necesites');
                setMarker($scope.map, new google.maps.LatLng(-34.614399, -58.531352), 'Farmacia plus', 'Siempre mas para vos');
                
                $scope.marker = new google.maps.Marker({
                    position: $scope.geolocate,
                    map: $scope.map,
                    title: "Usted esta aquí!"
                });
                
            });
          
        },100);
 
     });
 
    })();
 

Desde ya gracias a todos por su tiempo.!!!

[Dafonz]

La verdad nunca he usado onsen, pero asi rapido viendo el código, desde que estás usando elementos del dom en el controller te debería dar una idea que eso debería pasarse a una directiva.
Dentro de la directiva puedes acceder a los elementos que agrega esta y agregarle los listeners.

Si la información es estática podrías crear objetos con el contenido y simplemente poner la directiva de ng-if dentro del container y con el $scope.detailInfo (por ejemplo) con el objeto correspondiente.
O bien si el contenido varia completamente de forma que los binding no te sirven, puedes usar templates (scripts text/ng-template) y cargarlos independientemente.

Otra recomendación esta meramente personal es darle un poco mas de significado a tu codigo, como crear funcion init, crear funcion setMarker que le mande llamar init, inicializeMarker donde cargue coordenadas con titulos, etc. Lo hardcodeado podria ser angular.constants, etc..

[mauritosuarez]

Gracias Dafonz por responder.

La información es estatica, porque tengo que presentar una demo, si la aprueban ya tengo que diseñar el servicio y la db para consumir datos de una tabla.

Intentare con lo que me dices.

Nuevamente gracias por tu comentario.