Nesta etapa, você tornará a imagem do telefone celular clicável na página Detalhes do telefone celular.
Reinicie o diretório de trabalho:
checkout git -f etapa -10
A exibição de detalhes do telefone celular mostra uma imagem grande do telefone atual, além de algumas miniaturas menores. Seria ainda melhor se o usuário clicar na miniatura e puder substituir o grande por si mesmo. Agora vamos ver como implementá -lo com o AngularJS.
As diferenças mais importantes entre a Etapa 9 e a Etapa 10 estão listadas abaixo. Você pode ver a completa diferença no Github.
Controlador
app/js/controllers.js
... função Tenexagem de telefone ($ SCOPE, $ RouteParams, $ http) {$ http.get ('telefones/' + $ routeparams.phoneid + '.json'). success (function (data) {$ scope.phone = data; $ scope.mainImageurl = data.images [0]; $ scope.setImage = function (imageurl) {$ scope.mainImageurl = imageurl; }} // Tenentetailctrl. $ Inject = ['$ SCOPE', '$ ROUTEPARAMS', '$ HTTP'];No controlador telefônico, criamos a propriedade do modelo MainImageUrl e definimos seu valor padrão para o URL da primeira imagem móvel.
modelo
App/parcials/telefone-detail.html
<img ng-src = "{{mainImageUrl}}"> ... <ul> <li ng-repeat = "img em telefone.images"> <img ng-src = "{{img}}" ng-click = "setImage (img)"> </li> </ul> ...Ligamos a diretiva NGSRC da grande imagem à propriedade MainImageUrl.
Ao mesmo tempo, registramos um processador NGCLICK na miniatura. Quando um usuário clica em qualquer uma das miniaturas, o processador usará a função de manuseio de eventos do setImage para definir a propriedade MainImageUrl para o URL da miniatura selecionada.
teste
Para verificar esse novo recurso, adicionamos dois testes de ponta a ponta. Uma imagem principal de verificação é definida como a primeira imagem móvel por padrão. O segundo teste clica em várias miniaturas e verifica que a imagem principal muda razoavelmente.
teste/e2e/cenarios.js
... descreva ('Detalhes do telefone Exibir', function () {... it ('deve exibir a primeira imagem de telefone como a imagem principal do telefone', function () {expect (elemento ('img.phone'). att ('src')). toB ('img/telefones/nexus-s.0.jp');}); iM ('deve ser um swap main elemento ('. Espere (elemento ('img.phone'). Att ('src')). }); });Agora você pode atualizar seu navegador e executar o teste de ponta a ponta novamente, ou pode executá-lo no servidor AngularJS.
prática
Adicione um novo método de controlador ao telefone Tenenteterailctrl:
$ scope.hello = function (nome) {alert ('hello' + (nome || 'mundo') + '!'); }E adicione:
<botão ng-click = "hello ('elmo')"> hello </botão>
Vá para o modelo de telefones.html.
Resumir
Agora que o navegador da imagem está pronto, estamos prontos para a etapa 11 (a última etapa!), Aprenderemos a obter dados de uma maneira mais elegante.
O exposto acima são as informações resolvidas do processador de eventos AngularJS. Continuaremos a adicioná -lo mais tarde. Obrigado pelo seu apoio a este site!