Question

I have a map with some markers on it. On click, each marker is opening a overlay-div.

 <div class="map" ng-init="loadall()">
            <a ng-click="details.show=!details.show" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.coordleft}}px;top:{{marker.coordtop}}px" ng-repeat="marker in dealer"></a>    
        </div>  

it’s opening this div:

<div ng-show="details.show">      
    <div ng-view></div>
</div>  

Problem:
If the div is already open (details.show == true) my customer noticed, that if you leave it open and click on an other marker on the map, the div closes again.

What I want to achieve:
If the div is already open, just load the new content into the ng-view without closing and reopening the div again.

Is this possible?

EDIT:

My routes:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/dealer/:id', {templateUrl: 'files/tpl/dealer-details.html?20', controller: 'DealerDetailsCtrl', activetab: 'details'}).
      when('/dealermessage/:id', {templateUrl: 'files/tpl/dealer-message.html?124', controller: 'DealerMessageCtrl', activetab: 'message'}).
      when('/dealersendmessage/:id', {templateUrl: 'files/tpl/dealer-details.html?8', controller: 'DealerDetailsCtrl', activetab: 'details'}).
      otherwise({redirectTo: '/dealer'});
}]);  

If a marker has been clicked, the first route and controller are loading.Is this helping out?

EDIT No.2:
The “marker/div toggle is working now but I have now a strange behavior of the opened overlay.

Example:
When I open “Marker 1” the div is opening fine. When the div for “Marker 1” is open, I can click on “Marker 2” and the div refreshes with the content of “Marker 2”. But when I now click on “Marker 1” the div suddenly closes.
How can I stop it?

Answer 1

Still don’t understand it much, but you keep only one model to toggle several markers. So if you click on one marker to open, another marker will close it, since you don’t keep the marker’s state. You probably need something like:

<div ng-repeat="marker in dealer">
   <a ng-click="details.show=toggle(marker)" href="#/dealer/{{marker.id}}" 
      class="marker" style="left:{{marker.coordleft}}px;top:{{marker.coordtop}}px"></a>
</div>

In your controller you define the toggle function:

$scope.toggle = function(marker) {
   marker.show = !marker.show;

   return marker.show;
};