AngularJS'nin bir A etiketinin başlık niteliğine bağlanmasını nasıl sağlarsınız?

131

Amaç, bir küçük resmin araç ipucunda bir ürün adının görünmesini sağlamaktır. Tarayıcılar "ng-title" veya "ng-attr-title" dan bir araç ipucu oluşturmazlar.

AngularJS 1.0.7 sürümünü kullanıyoruz. Herhangi bir özniteliğin başına "ng-" veya "ng-attr" ekleyebilirsiniz ve Angular buna göre bağlanır. Ancak, HTML "A" etiketinin başlık özniteliğine "bağlı" görünmüyor.

Ör. 1.

Kod: <a title="{{product.shortDesc}}" ...>

Beklenen Sonuç: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Gerçek sonuç: <a title="{{product.shortDesc}}" ...>Araç ipucunda istenmeyen diş telleri alıyoruz.

Ör. 2.

Kod: <a ng-attr-title="{{product.shortDesc}}" ...>

Beklenen Sonuç: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

Gerçek sonuç: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

Ne sade bir titlekıyafet alıyoruz ne de çalışan bir ipucu.

angularjs

— Benxamin
kaynak

228

Görünüşe göre AngularJS 1.1.4'te bu durumda kullanabileceğiniz ng-attryeni bir yönerge .

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

Ancak, 1.0.7'de kalırsanız, efekti yansıtmak için muhtemelen özel bir yönerge yazabilirsiniz.

— Nhat Nguyen
kaynak

53

Bazen, başlık özniteliği üzerinde veya bu konudaki diğer öznitelikler üzerinde enterpolasyon kullanılması arzu edilmez, çünkü bunlar enterpolasyon gerçekleşmeden önce çözümlenir. Yani:

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

Bir bağlamaya sahip bir özniteliğin önünde ngAttr öneki varsa (ng-attr- olarak normalleştirilir), o zaman bağlama sırasında karşılık gelen öneksiz özniteliğe uygulanacaktır. Bu, aksi takdirde tarayıcılar tarafından hevesle işlenecek özniteliklere bağlanmanıza olanak tanır. Öznitelik yalnızca bağlama tamamlandığında ayarlanacaktır. Önek daha sonra kaldırılır:

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

(Angular'ın çok daha eski bir sürümünü kullanmadığınızdan emin olun). İşte v1.2.2 kullanan bir demo keman:

Fiddle

— AlwaysALearner
kaynak

3

Buradaki sorun, AngularJS sürümünüzdür; ng-attr1.1.4 sürümünde sunulduğu için çalışmıyor. Neden title="{{product.shortDesc}}"sizin için çalışmadığından emin değilim , ancak benzer nedenlerden dolayı olduğunu düşünüyorum (eski Açısal versiyon). Bunu 1.2.9'da test ettim ve benim için çalışıyor.

Buradaki diğer cevaplara gelince, bu, birkaç kullanım durumundan biri DEĞİLDİR ng-attr! Bu basit bir çift kıvrımlı parantez durumudur:

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

— omikes
kaynak

1

Hızlı bir cevap için buradaki kemana bakın

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

Başlığı, Angular JS kullanarak koşullu olarak öğeler üzerinde görüntüler

— Sundara Prabu
kaynak

-4

Arama querymodeli, ng-controller="whatever"direktif tarafından tanımlanan kapsamda yaşar . Bu nedenle, sorgu modelini bağlamak istiyorsanız <title>, ngControllerbildirimi hem gövde hem de başlık öğeleri için ortak bir üst öğe olan bir HTML öğesine taşımanız gerekir :

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

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

— solidak
kaynak