Question

我有一张带有一些标记的地图。点击后，每个标记都会打开一个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>

打开这个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：
“marker / div切换现在正在工作，但我现在对打开的叠加层有一种奇怪的行为。

示例：
当我打开“Marker 1”时，div正好打开。当“标记1”的div打开时，我可以单击“标记2”并使用“标记2”的内容刷新div。但是当我现在点击“标记1”时，div突然关闭我怎么能阻止它？

Answer 1

仍然不太了解，但你只保留一个模型来切换几个标记。因此，如果您单击一个标记打开，另一个标记将关闭它，因为您没有保持标记的状态。你可能需要这样的东西：

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

Answer 2

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

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

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

然后将srcElement存储在$ scope（$scope.openMarker = ev.srcElement）上。 handleOverlay（）然后可以为每次单击确定单击是否已在已打开的元素上发生，或者是否为新单击。

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

Answer 3

所以我遵循了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;
};

AngularJS - ng-click和ng-show

3 个答案: