Como você consegue que o AngularJS se ligue ao atributo title de uma tag A?

131

A intenção é que um nome de produto apareça na dica de ferramenta de uma miniatura. Os navegadores não criam uma dica de ferramenta a partir de "ng-title" ou "ng-attr-title".

Estamos usando o AngularJS versão 1.0.7. Você pode acrescentar qualquer atributo com "ng-" ou "ng-attr" e o Angular será vinculado de acordo. No entanto, ele não parece "vincular" ao título attirbute da tag "A" do HTML.

Ex. 1

Código: <a title="{{product.shortDesc}}" ...>

Resultado esperado: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Resultado real: <a title="{{product.shortDesc}}" ...>obtemos chaves indesejadas na dica de ferramenta.

Ex. 2)

Código: <a ng-attr-title="{{product.shortDesc}}" ...>

Resultado esperado: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Resultado atual: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Não temos uma titleatitude simples , nem uma dica de ferramenta de trabalho.

angularjs

— Benxamin
fonte

228

Parece que ng-attré uma nova diretiva no AngularJS 1.1.4 que você pode usar nesse caso.

<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>

No entanto, se você permanecer com a 1.0.7, provavelmente poderá escrever uma diretiva personalizada para espelhar o efeito.

— Nhat Nguyen
fonte

53

Às vezes, não é desejável usar a interpolação no atributo title ou em qualquer outro atributo, porque eles são analisados antes da interpolação. Assim:

<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->

Se um atributo com uma ligação for prefixado com o prefixo ngAttr (desnormalizado como ng-attr-), durante a ligação será aplicado ao atributo sem prefixo correspondente. Isso permite que você se ligue a atributos que, de outra forma, seriam processados pelos navegadores. O atributo será definido apenas quando a ligação for concluída. O prefixo é então removido:

<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>

(Verifique se você não está usando uma versão muito anterior do Angular). Aqui está um violino de demonstração usando a v1.2.2:

Fiddle

— AlwaysALearner
fonte

3

O problema aqui é sua versão do AngularJS; ng-attrnão está funcionando devido ao fato de ter sido introduzido na versão 1.1.4. Não sei ao certo por que title="{{product.shortDesc}}"não está funcionando para você, mas imagino que seja por razões semelhantes (versão antiga do Angular). Eu testei isso no 1.2.9 e está funcionando para mim.

Quanto às outras respostas aqui, este NÃO é um dos poucos casos de uso para ng-attr! Esta é uma situação simples de colchete duplo:

<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />

— omikes
fonte

1

Veja o violino aqui para uma resposta rápida

data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"

Exibe o título sobre os elementos condicionalmente usando Angular JS

— Sundara Prabu
fonte

-4

O querymodelo de pesquisa vive no escopo definido pela ng-controller="whatever"diretiva. Portanto, se você deseja vincular o modelo de consulta <title>, é necessário mover a ngControllerdeclaração para um elemento HTML que é um pai comum para os elementos body e title:

<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">

Ref: https://docs.angularjs.org/tutorial/step_03

— solidak
fonte