O problema:
Queremos tirar uma foto de uma pasta que contém fotos de perfil. No entanto, não temos fotos de perfil para todos. Quando não há uma foto de perfil, queremos mostrar uma imagem de espaço reservado, que é um ícone de glifo.
A solução:
escrevemos alguns JS que envia um caminho para uma foto de perfil para o dom. Se o dom não obtiver um caminho, ele mostrará um ícone de glifo.
Nossa abordagem…
O que o HTML abaixo diz é, “Execute a função profileImage. Se for verdadeiro, defina a imagem de plano de fundo para o caminho que a função exibe. Se for falso, não mostre nada – o glifo será mostrado em seu lugar.”
O HTML:
<div class="associate-photo" ng-style="{{journalEntry.profileImage()}}">
<i ng-hide="{{journalEntry.profileImage()}}" class="glyph-circle-user journal-user-glyph {{ journalEntry.getAcceleration() }}"></i>
</div>O JS:
$scope.journalEntry.profileImage = function(){
if ($scope.journalEntry.user && $scope.journalEntry.user.Namecode) {
return {
backgroundImage: "url('" + profilePicBaseUrlFactory + $scope.journalEntry.user.Namecode + ".jpg" + "')"
};
}
};Linha por linha, aqui está o que diz o código JS …
$scope.journalEntry.profileImage = function(){
// When you see journalEntry.profileImage, then...
if ($scope.journalEntry.user && $scope.journalEntry.user.Namecode) {
//Check out the individual entry that is on the scope. If it has a user name and a namecode then...
return {
backgroundImage: "url('" + profilePicBaseUrlFactory + $scope.journalEntry.user.Namecode + ".jpg" + "')"
// Return the path that we get when we run the profilePicBaseUrl function and we add the namecode plus jpg to the end of it...
// thus creating a string that is a path name
};
}
};Se for VERDADEIRO, o que acabamos vendo ao executar esse código no navegador é …
<div class="associate-photo" ng-style="{"backgroundImage":"url('assets/images/associates/kali.jpg')"}" style="background-image: url(http://localhost/~kkiger/project/build/assets/images/associates/kali.jpg);">
<i ng-hide="background-image: url(http://localhost/~kkiger/project/build/assets/images/associates/kali.jpg);" class="glyph-circle-user journal-user-glyph acceleration-neutral ng-hide"></i>
</div>Efetivamente, se houver uma imagem, <i> vemos um caminho para a imagem atribuída à regra backgroundImage </i>. Normalmente essas regras são encontradas em arquivos CSS, mas também podem estar lá no HTML! Exemplo de como é uma imagem de plano de fundo padrão definida para um URL em CSS abaixo … Veja, você pode corresponder isso ao URL em nosso código, certo?
background-image: url(http://www.example.com/bck.png);Se for FALSY, ng-hide obtém e uma string vazia (veja abaixo) e vemos o glifo …
<i ng-hide="" class="glyph-circle-user journal-user-glyph acceleration-positive"></i>Então, vemos o glifo de espaço reservado no local onde a foto do perfil normalmente estaria.
Como a mágica acontece …
Tudo se resume a essas 2 diretivas angulares – o estilo Ng esconde ou mostra a foto do perfil e o ng-hide mostra o glifo quando necessário.
Aqui está a documentação do Angular para o estilo ng: “A diretiva ngStyle permite que você defina o estilo CSS em um elemento HTML condicionalmente.” Ou seja, o estilo ng permite que você aplique CSS às vezes, quando quiser, em vez de o tempo todo.
Um pouco mais de detalhe … “[Ng-style é uma] expressão que evals a um objeto cujas chaves são nomes de estilo CSS e os valores são valores correspondentes para essas chaves CSS. Visto que alguns nomes de estilo CSS não são chaves válidas para um objeto, eles devem ser citados. Veja o estilo de ‘cor de fundo’ no exemplo abaixo. ”
Hummm, o quê? Ok, em inglês … Com o estilo ng, você pode inserir coisas no dom. As coisas que você insere são estilos CSS. Você pode não apenas inserir o nome do estilo, mas também os valores para aquele estilo, em vez de ter que tê-los em um arquivo CSS. Então, por que não usar o ng-show? O legal do estilo ng é que ele não causa erro se o jpg não for encontrado, enquanto o ng-show sim.
Aqui está a documentação do Angular para ng-hide: “Quando falsa, a classe CSS .ng-hide é removida do elemento, fazendo com que o elemento NÃO apareça oculto.”
<i> Meu Deus, como sei de qual Angular preciso?!?! </i> Ng-show e Ng-hide são complicados. Se você sabe que uma função vai retornar algo verdadeiro e deseja mostrar essa coisa quando for verdadeiro, use o ng-show. Enquanto isso, se você tem uma função que sabe que retornará algo falso, e deseja mostrar essa função quando for falso, use ng-hide. Ng-show é como “show on true / unshow on false”. Ng-hide é basicamente como “mostrar no falso / ocultar no verdadeiro”. Jogos de palavras malucos, hein?
Agora que você sabe como usar uma função para definir uma imagem de plano de fundo com Angular, verifique como você pode usar Angular para definir a cor em um glifo em “Definir a cor em um Div, Span ou ícone de glifo em resposta aos dados . ”