A टैग के शीर्षक विशेषता को बाँधने के लिए आपको AngularJS कैसे मिलता है?

131

एक थंबनेल के टूलटिप में एक उत्पाद का नाम दिखाई देने का इरादा है। ब्राउजर "एनजी-टाइटल" या "एनजी-एटर-टाइटल" से टूलटिप नहीं बनाते हैं।

हम AngularJS संस्करण 1.0.7 का उपयोग कर रहे हैं। आप "एनजी" या "एनजी-एटर" के साथ किसी भी विशेषता को प्रस्तुत कर सकते हैं और कोणीय तदनुसार बांधेंगे। हालाँकि, यह HTML "A" टैग के शीर्षक पोशाक के लिए "बाइंड" नहीं लगता है।

पूर्व। 1।

कोड: <a title="{{product.shortDesc}}" ...>

अपेक्षित परिणाम: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

वास्तविक परिणाम: <a title="{{product.shortDesc}}" ...>हमें टूलटिप में अवांछित ब्रेसिज़ मिलते हैं।

पूर्व। 2।

कोड: <a ng-attr-title="{{product.shortDesc}}" ...>

अपेक्षित परिणाम: <a title="Canon Powershot XS50 12MB Digital Camera" ...>

वास्तविक परिणाम: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

हमें एक सादा titleपोशाक नहीं मिलता है , और न ही हमें एक काम करने वाला टूलटिप मिलता है।

angularjs

— Benxamin
स्रोत

228

ऐसा लगता ng-attrहै कि AngularJS 1.1.4 में एक नया निर्देश है जिसे आप संभवतः इस मामले में उपयोग कर सकते हैं।

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

हालांकि, यदि आप 1.0.7 के साथ रहते हैं, तो आप शायद प्रभाव को प्रतिबिंबित करने के लिए एक कस्टम निर्देश लिख सकते हैं।

— नट नगुयेन
स्रोत

53

कभी-कभी शीर्षक विशेषता पर या उस मामले के लिए किसी अन्य विशेषता पर प्रक्षेप का उपयोग करना वांछनीय नहीं है, क्योंकि प्रक्षेप होने से पहले वे पार्स हो जाते हैं। इसलिए:

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

यदि बाइंडिंग के साथ विशेषता को ngAttr उपसर्ग के साथ उपसर्ग किया जाता है (एनजी-एट्र के रूप में चिह्नित किया जाता है) तो बाइंडिंग के दौरान संबंधित उपसर्ग विशेषता पर लागू किया जाएगा। यह आपको उन विशेषताओं के साथ बांधने की अनुमति देता है जो अन्यथा ब्राउज़र द्वारा उत्सुकता से संसाधित की जाएंगी। विशेषता केवल तभी सेट की जाएगी जब बंधन किया जाएगा। तब उपसर्ग हटा दिया जाता है:

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

(सुनिश्चित करें कि आप एंगुलर के पहले के संस्करण का उपयोग नहीं कर रहे हैं)। यहाँ v1.2.2 का उपयोग करते हुए एक डेमो फिडल है:

Fiddle

— AlwaysALearner
स्रोत

3

यहाँ समस्या आपके AngularJS के संस्करण की है; ng-attrइस तथ्य के कारण काम नहीं कर रहा है कि इसे 1.1.4 संस्करण में पेश किया गया था। मैं अनिश्चित हूं कि title="{{product.shortDesc}}"आपके लिए काम क्यों नहीं किया जा रहा है, लेकिन मुझे लगता है कि यह समान कारणों (पुराने कोणीय संस्करण) के लिए है। मैंने 1.2.9 पर इसका परीक्षण किया और यह मेरे लिए काम कर रहा है।

अन्य उत्तरों के लिए यहाँ, यह कुछ उपयोग मामलों में से नहीं है ng-attr! यह एक सरल डबल-कर्ली-ब्रैकेट स्थिति है:

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

— omikes
स्रोत

1

त्वरित उत्तर के लिए यहाँ की फ़िडल को देखें

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

एंगुलर जेएस का उपयोग करके सशर्त रूप से तत्वों पर शीर्षक प्रदर्शित करता है

— सुंदरा प्रबु
स्रोत

-4

खोज queryमॉडल ng-controller="whatever"निर्देश द्वारा परिभाषित दायरे में रहता है । इसलिए यदि आप क्वेरी मॉडल को बांधना चाहते हैं <title>, तो आपको ngControllerघोषणा को एक HTML तत्व में बदलना होगा जो शरीर और शीर्षक तत्वों दोनों के लिए एक सामान्य अभिभावक है:

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

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

— solidak
स्रोत