AngularJS - ng-click和ng-show

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;
};

Answer 2

Your ng-click handler needs to have more logic (as @asgoth's answer shows).

Another possible solution (that does not modify the dealer data): pass $event into your ng-click handler

<a ng-click="handleOverlay($event)" ... ></a>

Then store the srcElement on $scope ( $scope.openMarker = ev.srcElement ). handleOverlay() can then determine, for each click, if the click is happening on the element that is already open, or a new one.

We don't know how you are reloading ng-view, so if that is an issue, we'd need to see more code. Eg, are you loading a different controller for each new view? If so, you may need to store the srcElement on a service or rootScope (ie, something that will survive a view/controller change).

Answer 3

So I followed asgoth's solution and also extended it to fix the issue mentioned by Marek123. Below is my solution :

$scope.selectedMarker = {};
$scope.toggle = function(marker) {
  //assuming you have a key "id" in each dealer
  if (marker.id !== $scope.selectedMarker.id) {
      _.each($scope.delear, function(value, index) {
        $scope.delear[index].show = false;
      });
    }
   marker.show = !marker.show;
   return marker.show;
};