Mais

Alterando a classe css do item da lista usando ng-class ao passar o mouse sobre os Marcadores do Mapa de Folheto?

Alterando a classe css do item da lista usando ng-class ao passar o mouse sobre os Marcadores do Mapa de Folheto?


Tenho um aplicativo com um mapa / marcadores à direita e um menu de itens de lista à esquerda com informações sobre os marcadores (como o Yelp ou Foursquare).

Com alguns dos meus hackers para iniciantes, consegui fazer com que os eventos de foco funcionassem:

Mas é estranho, o item da lista (fundo rosa ao pairar) só funciona quando eu movo o mouse para fora do marcador. Estou tentando configurá-lo de forma que, quando você passa o mouse sobre o marcador, o plano de fundo do item de lista apropriado muda e quando você move o mouse, ele volta para o branco. A maioria dos outros exemplos / questões da classe ng que li parecem funcionar de maneira bem diferente (eles estão indo para uma funcionalidade diferente).

Ok, para o código:

HTML

A parte chave aí é ong-class = "{hover: $ index == hoveritem}"

Agora vou mostrar de onde vem o item de navegação

Controlador

$ 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); } // Obtenha os dados geojson dos países de um 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}); camadas [feature.properties.id] = layer; //console.log(layers);}}});}); }]);

Então, passar o mouse sobre um marcador (layer.on ({mouseover: pointMouseover, mouseout: pointMouseout});)

dispara as funções apropriadas que então mudam as cores dos ícones.

Eu conectei olayer.feature.properties.id;para$ scope.hoveritempara que meu HTML possa usá-lo como índice (para a classe ng). Quando você passa o mouse sobre um marcador, ele alimenta o id do marcador para $ scope.hoveritem, que então vai para o$ indexparte do HTML, alterando assim sua classe CSS.

Mas algo está errado. Ele só muda para o item de lista correto ao tirar o mouse em vez de ao passar o mouse. Além disso, não consigo descobrir como fazê-lo retornar ao estado branco padrão. Nenhum dos itens da lista deve parecer ativo se o mouse não estiver em um marcador.


A razão para o atraso foi por causa do ciclo angular $ apply digest. Angular basicamente não estava ciente das mudanças paraitem flutuante. Embrulhar com$ scope. $ applyfez o truque:

$ scope. $ apply (function () {$ scope.hoveritem = layer.feature.properties.id;})

Como faço para acessar um método no controlador de visualização raiz de uma classe diferente?

Eu tenho meu controlador de exibição de raiz NB_ViewController. Eu tenho outra classe chamada ShowScreen. Como o ShowScreen pode acessar um método em NB_ViewController?

Muito obrigado antecipadamente.

Faça uma propriedade "global" em seu delegado de aplicativo que retém uma referência ao controlador de visualização raiz, por exemplo, @property (não atômico, reter) UIViewController * rootViewController

Quando você instancia o controlador de visualização raiz no método -applicationDidFinishLaunching: do delegado do aplicativo, defina a propriedade self.rootViewController igual ao controlador de visualização recém-instanciado

Adicione uma macro #define em seu arquivo de constantes (ou no cabeçalho da classe onde deseja usá-la) que permite acessar o delegado do aplicativo de qualquer lugar, por exemplo, #define UIAppDelegate ((MyAppDelegate *) [UIApplication sharedApplication] .delegate)

Em ShowScreen, chame uma propriedade ou método do controlador de visualização raiz por meio do delegado do aplicativo, por exemplo, [[UIAppDelegate rootViewController] someRootVCProperty] ou [[UIAppDelegate rootViewController] someRootVCMethod: foo withArgument: bar]

A etapa 2 deve ser opcional se você usar o Interface Builder e o IBOutlet do controlador de visualização raiz correspondente for denominado rootViewController.


Assista o vídeo: Mapping Database Entries with - Working with Data and APIs in JavaScript