CODEWITHSUNDEEP
javascriptangularjsoverlayhideshow
Marek123
Marek123

Reputation: 1211

AngularJS - ng-click and ng-show

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?

Upvotes: 1

Views: 14016

Answers (3)

skeep
skeep

Reputation: 940

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

Upvotes: 0

Mark Rajcok
Mark Rajcok

Reputation: 364737

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. E.g., are you loading a different controller for each new view? If so, you may need to store the srcElement on a service or rootScope (i.e., something that will survive a view/controller change).

Upvotes: 1

asgoth
asgoth

Reputation: 35829

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

Upvotes: 3

Related Questions