AngularJS - ng-click and ng-show

AngularJS - ng-click and ng-show

本文关键字：ng-show and ng-click AngularJS      更新时间：2023-09-26

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

这可能吗?

编辑:

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

如果一个标记被点击，第一个路由和控制器正在加载。这有帮助吗?

编辑2:
标记/div切换现在工作，但我现在有一个奇怪的行为打开覆盖。

例子:
当我打开"标记1"div打开很好。当"Marker 1"的div打开时，我可以点击"Marker 2"，div刷新为"Marker 2"的内容。但是当我现在点击"Marker 1"的时候div突然关闭了。
我怎样才能阻止它呢?

还是不太明白，但是您只保留一个模型来切换多个标记。因此，如果您单击一个标记打开，另一个标记将关闭它，因为您不保留标记的状态。您可能需要这样的内容:

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

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

另一个可能的解决方案(不修改经销商数据):将$event传递到ng-click处理程序

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

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

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

所以我遵循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;
};
相关文章：