Thanks for the response, Eric. I'll build a plunker and consider your
suggestions for this.
On Tuesday, July 29, 2014 6:31:21 PM UTC-5, Eric Eslinger wrote:
>
> A plunker would be helpful, as code of this complexity is hard to debug
> blind.
>
> However, it looks like you're using jquery events to fire off your
> pointMouse handlers. Those events (IIRC) happen outside the digest / apply
> cycle, so angular isn't notified of a change to $scope.hoveritem (and
> therefore doesn't recalculate the ng-class).
>
> I'd consider trying to use $scope.apply(function() {$scope.hoveritem =
> bla} instead to see if that works. Or apply ng-mouseover to those as well,
> which fires inside an $apply context.
>
> Finally, I've run into issues with hover as a class vs hover as a
> pseudo-class. Ng-class adds an actual class selector to the div (so it
> looks like div class="potato hover", and is selected with .hover in your
> css declaration, rather than div:hover. the pseudo classes happen
> independent of angular, but can often get conflicted with angular's
> ng-class thing, because it seems to be common to define :hover and .hover
> with the same properties.
>
> hth
>
> e
>
>
>
>
> On Tue, Jul 29, 2014 at 3:03 PM, Kyle Pennell <[email protected]
> <javascript:>> wrote:
>
>> I've got a doozy of an ng-class problem.
>>
>> So I have an app with a map/markers on the right and a list-item menu on
>> the left with info about the markers (like Yelp or Foursquare).
>>
>> With some of my beginner hacking, I got the hover events to sort of work:
>>
>> <http://i.stack.imgur.com/RHZmo.png>
>>
>> But it's odd, the list-item (pink background on hover) only works when I
>> mouseout of the marker. I'm trying to set it up so that when you mouse
>> over the marker, the appropriate list-item's background changes and when
>> you mouseout, it goes back to white. Most of the other ng-class
>> examples/questions I read through seem to work quite differently (they're
>> going for a different functionality).
>>
>> Ok, to the code:
>>
>> *HTML*
>>
>> <div class="col-md-6" id="leftCol">
>>> <div class="list-group" ng-controller="ShowsCtrl">
>>> <div class="nav nav-stacked list-group-item" id="sidebar"
>>> ng-repeat="(key, show) in shows.features" ng-mouseover="menuMouse(show)"
>>> ng-mouseout="menuMouseout(show)" ng-class="{hover: $index == hoveritem}">
>>
>>
>> The key part there is the ng-class="{hover: $index == hoveritem}"
>>
>> Now I'll show you where hoveritem comes from
>>
>> *Controller*
>>
>>
>>> $scope.hoveritem = {};
>>>
>>> function pointMouseover(leafletEvent) {
>>> var layer = leafletEvent.target;
>>> //console.log(layer.feature.properties.id);
>>> layer.setIcon(mouseoverMarker);
>>> $scope.hoveritem = layer.feature.properties.id;
>>> console.log($scope.hoveritem);
>>> }
>>>
>>> function pointMouseout(leafletEvent) {
>>> var layer = leafletEvent.target;
>>> layer.setIcon(defaultMarker);
>>> }
>>>
>>> $scope.menuMouse = function(show){
>>> var layer = layers[show.properties.id];
>>> //console.log(layer);
>>> layer.setIcon(mouseoverMarker);
>>> }
>>>
>>> $scope.menuMouseout = function(show){
>>> var layer = layers[show.properties.id];
>>> layer.setIcon(defaultMarker);
>>> }
>>>
>>>
>>>
>>>
>>> // Get the countries geojson data from a JSON
>>> $http.get('/json/shows.geojson').success(function (data, status)
>>> {
>>>
>>> angular.extend($scope, {
>>> geojson: {
>>> data: data,
>>> onEachFeature: function (feature, layer) {
>>> layer.bindPopup(feature.properties.artist);
>>> layer.setIcon(defaultMarker);
>>> layer.on({
>>> mouseover: pointMouseover,
>>> mouseout: pointMouseout
>>> });
>>> layers[feature.properties.id] = layer;
>>> //console.log(layers);
>>> }
>>> }
>>>
>>> });
>>> });
>>>
>>> }]);
>>
>>
>> So mousing over a marker
>> (`layer.on({
>> mouseover: pointMouseover,
>> mouseout: pointMouseout
>> });`)
>>
>> fires the appropriate functions which then changes the icon colors.
>>
>> I connected the layer.feature.properties.id; to $scope.hoveritem so that
>> my HTML can then use that as the index c. When you mouseover a marker, it
>> then feeds the marker id through to $scope.hoveritem which then it turn
>> goes into the $index part of the HTML, thus changing it's CSS class.
>>
>> But something is awry. It only changes to the correct list item on
>> mouseout instead of mouseover. Furthermore, I can't figure out to get it
>> to return to the default white state. None of the list items should look
>> active if the mouse is not on a marker.
>>
>> Any ideas or hints on this would be very appreciated.
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "AngularJS" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at http://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
