AngularJS - ng-click und ng-show

Ich habe eine Karte mit einigen Markern. Auf klicken Sie auf, jeden einzelnen marker öffnet ein 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>

es ist die Eröffnung dieses div:

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

Problem:
Wenn das div-Element ist bereits geöffnet (details auf.show == true) mein Kunde bemerkt, dass, wenn Sie lassen Sie es öffnen, und klicken Sie auf eine andere Markierung auf der Karte, die div wieder schließt.

, Was ich erreichen will:
Wenn die div bereits geöffnet ist, laden Sie einfach die neuen Inhalte in die ng-view ohne schließen und erneuten öffnen der div wieder.

Ist das möglich?

EDIT:

Meine Routen:

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'});
}]);

Wenn ein marker angeklickt wurde, ist die erste route und controller laden.Ist diese Hilfe aus?

EDIT No. 2:
Die "marker/div Umschalten funktioniert jetzt, aber ich habe nun ein seltsames Verhalten des overlay geöffnet.

Beispiel:
Wenn ich öffnen Sie den "Marker 1" das div-Element öffnen in Ordnung. Wenn das div für "Marker 1" ist offen, ich kann Sie auf "Marker 2" und die div erfrischt mit dem Inhalt der "Marker 2". Aber wenn ich nun klicken Sie auf den "Marker 1" wird das div plötzlich schließt.
Wie kann ich es stoppen?

Ich verstehe nicht, was hier. Ist ng-click="details.show=!details.show einen toggle-link?

InformationsquelleAutor Marek123 | 2013-01-14

3

Verstehen immer noch nicht viel, aber du nur ein Modell zum Umschalten der mehreren Marker. Also, wenn Sie auf einen marker öffnen, einem anderen marker zu schließen, da Sie nicht halten den marker. Sie müssen wahrscheinlich etwas wie:
```
<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>
```
Im controller definieren Sie die toggle Funktion:
```
$scope.toggle = function(marker) {
   marker.show = !marker.show;

   return marker.show;
};
```
Das wechseln ist nicht das problem. Es funktioniert einwandfrei. Aber mein Kunde will, dass, WENN das overlay öffnen (zeigen == true) und ein Kunde klickt auf den nächsten marker, der Inhalt wird neu geladen mit der neuen id statt der Schließung der überlagerung.
naja, ich würde Zustimmen, dass die toggle-wahrscheinlich schaltet ein marker korrekt, aber Sie versuchen, Ihre ng-klicken Sie auf, mehr zu tun, als nur Umschalten, jetzt, nicht wahr? Wenn Sie versucht, was asgoth vorgeschlagen, hat es funktioniert? Wenn es nicht funktioniert, was passiert dann?
Ja, ich habe versucht die Lösung von asgoth und es funktionierte perfekt. Danke. Darf ich Fragen, für einige "offtopic". Ist es möglich, zu bestimmen, welcher marker geklickt wurde, und markieren Sie diese Markierung mit ng-class?
marker.zeigen sollten angeben, welche marker geklickt wurde, so fügen Sie einfach die ng-Klasse-Richtlinie, in dem es verwendet: ng-class={someClassYouHave: marker.show}
Leider hat es nicht geklappt :/

InformationsquelleAutor asgoth
1

Ihre ng-click-handler muss mehr Logik (wie @asgoth Antwort zeigt).

Andere mögliche Lösung (nicht ändern Sie die Händler-Daten): pass $event in Ihrer ng-click-handler
```
<a ng-click="handleOverlay($event)" ... ></a>
```
Speichern Sie dann die srcElement auf $scope ($scope.openMarker = ev.srcElement). handleOverlay() können dann bestimmen, für jeden Klick, wenn die klicken Sie jetzt auf das element, das bereits offen ist, oder eine neue.

Wir wissen nicht, wie Sie neu geladen werden ng-view, so dass, wenn das ist ein Problem, wir brauchen würde, um zu sehen, mehr code. E. g., sind Sie laden eine andere Domänencontroller für jede neue Ansicht? Wenn dem so ist, müssen Sie möglicherweise zu speichern, die srcElement auf einen Dienst oder rootScope (d.h., etwas, das überleben eines view - /controller-änderung).

Ich fügte hinzu, die Routen zu meinem ersten post, wird diese Ihnen helfen ?
Jeder Klick ist wahrscheinlich die Erstellung einer neuen Steuerung (überprüfen Sie durch hinzufügen console.log('in ctrl') als erste Zeile DealerDetailsCtrl. Daher müssen Sie zum speichern der srcElement im Zusammenhang mit der aktuell geöffneten overlay im $rootScope oder in einem service (oder versuchen, was @asgoth vorgeschlagen). Injizieren $rootScope in Ihre DealerDetailsCtrl, erhalten Sie Zugriff auf: Funktion DealerDetailsCtrl($scope, $rootScope) { ... }
Es funktioniert jetzt. Aber ich habe noch einige Fehler, überprüfen Sie meine Beiträge bitte.
Nun, ich schau es einige mehr, ich glaube nicht, dass asgoth Antwort funktioniert, weil es setzt einen toggle für jeden marker, also das Verhalten, das Sie sehen. Ich denke, Sie sollten versuchen, mein Ansatz-speichern der aktuell geöffneten marker (oder element) auf $rootScope (oder einen service). Haben Sie den click-handler bestimmen, wenn der aktuelle auf ist im Zusammenhang mit der marker, der als letztes geklickt wird oder nicht, und entsprechend handeln. Wenn Sie dennoch Fragen haben, richten Sie eine Geige oder plunkr.

InformationsquelleAutor Mark Rajcok

Also folgte ich asgoth die Lösung auf und erweiterte es um das Problem zu beheben erwähnt Marek123. Unten ist meine Lösung :

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

InformationsquelleAutor skeep

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.