1

我有一张地图，上面有一些标记。单击时，每个标记都打开一个覆盖 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>

它正在打开这个 div： 

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

问题：
如果 div 已经打开（details.show == true），我的客户注意到，如果您将其保持打开状态并单击地图上的其他标记，则 div 会再次关闭。

我想要实现
的目标：如果 div 已经打开，只需将新内容加载到 ng-view 中，而无需再次关闭并重新打开 div。

这可能吗？

编辑：

我的路线： 

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

如果单击了标记，则正在加载第一个路由和控制器。这有帮助吗？

编辑第 2 号：
“标记/div 切换现在正在工作，但我现在有一个打开的叠加层的奇怪行为。

示例：
当我打开“Marker 1”时，div 可以正常打开。当“Marker 1”的 div 打开时，我可以点击“Marker 2”，div 会刷新为“Marker 2”的内容。但是当我现在点击“Marker 1”时，div 突然关闭了。
我怎样才能阻止它？

4

3 回答 3

3

还是不太懂，但是你只保留一个模型来切换几个标记。因此，如果您单击一个标记打开，另一个标记将关闭它，因为您不保留标记的状态。你可能需要类似的东西：

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

在您的控制器中定义toggle函数：

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

   return marker.show;
};
于 2013-01-14T17:46:58.287 回答
1

您的 ng-click 处理程序需要更多逻辑（如@asgoth 的回答所示）。

另一种可能的解决方案（不修改经销商数据）：传递$event到您的 ng-click 处理程序

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

然后将 srcElement 存储在 $scope ( $scope.openMarker = ev.srcElement) 上。然后，对于每次点击，handleOverlay() 可以确定点击是发生在已经打开的元素上还是新的元素上。

我们不知道您如何重新加载 ng-view，所以如果这是一个问题，我们需要查看更多代码。例如，您是否为每个新视图加载不同的控制器？如果是这样，您可能需要将 srcElement 存储在服务或 rootScope 上（即，将在视图/控制器更改后继续存在的东西）。

于 2013-01-14T17:55:52.173 回答
0

所以我遵循了 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;
};
于 2013-03-05T08:47:10.397 回答