javascript AngularJS - ng-click 和 ng-show
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14323359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - ng-click and ng-show
提问by Marek123
I have a map with some markers on it. On click, each marker is opening a overlay-div.
我有一张地图，上面有一些标记。单击时，每个标记都会打开一个叠加 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：
<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.
问题：
如果 div 已经打开（details.show == true），我的客户注意到，如果您将其保持打开状态并单击地图上的其他标记，div 将再次关闭。
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.
我想要实现的目标：
如果 div 已经打开，只需将新内容加载到 ng-view 中，而无需再次关闭和重新打开 div。
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.
编辑第 2 号：
“标记/div 切换现在正在工作，但我现在有一个打开的叠加层的奇怪行为。
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?
示例：
当我打开“标记 1”时，div 可以正常打开。当“标记 1”的 div 打开时，我可以点击“标记 2”，该 div 刷新为“标记 2”的内容。但是当我现在点击“标记 1”时，div 突然关闭。
我怎样才能阻止它？
回答by asgoth
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 togglefunction:
在您的控制器中定义toggle函数：
$scope.toggle = function(marker) {
marker.show = !marker.show;
return marker.show;
};
回答by Mark Rajcok
Your ng-click handler needs to have more logic (as @asgoth's answer shows).
您的 ng-click 处理程序需要有更多的逻辑（如@asgoth 的回答所示）。
Another possible solution (that does not modify the dealer data): pass $eventinto your ng-click handler
另一种可能的解决方案（不修改经销商数据）：传入$event您的 ng-click 处理程序
<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.
然后将 srcElement 存储在 $scope ( $scope.openMarker = ev.srcElement) 上。然后，handleOverlay() 可以确定，对于每次点击，点击是发生在已经打开的元素上，还是发生在新的元素上。
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).
我们不知道您如何重新加载 ng-view，因此如果这是一个问题，我们需要查看更多代码。例如，您是否为每个新视图加载了不同的控制器？如果是这样，您可能需要将 srcElement 存储在服务或 rootScope 上（即，在视图/控制器更改后仍然存在的东西）。
回答by skeep
So I followed asgoth's solution and also extended it to fix the issue mentioned by Marek123. Below is my solution :
所以我遵循了asgoth的解决方案，并对其进行了扩展以解决Marek123提到的问题。以下是我的解决方案：
$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;
};
