আপনি कसरी একটি ট্যাগের শিরোনাম বৈশিষ্ট্যের সাথে আবদ্ধ করতে AngularJS পান?

131

থাম্বনেইলের সরঞ্জামদণ্ডে কোনও পণ্যের নাম উপস্থিত হওয়ার উদ্দেশ্যটি হ'ল। ব্রাউজারগুলি "এনজি-শিরোনাম" বা "এনজি-অ্যাটার-শিরোনাম" থেকে কোনও সরঞ্জামদণ্ড তৈরি করে না।

আমরা AngularJS সংস্করণ 1.0.7 ব্যবহার করছি using আপনি "এনজি-" বা "এনজি-অ্যাটর" দিয়ে যে কোনও বৈশিষ্ট্যকে পূর্বনির্ধারিত করতে পারেন এবং সেই অনুসারে কৌনিকটি আবদ্ধ হবে। যাইহোক, এটি HTML "এ" ট্যাগের শিরোনামকে "বাঁধাই" বলে মনে হচ্ছে না।

যাত্রা। 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" ...>

আমরা একটি সরল titleattirbute পাই না, না আমরা একটি কার্যক্ষম সরঞ্জাম পাবেন p

angularjs

— Benxamin
সূত্র

228

দেখে মনে হচ্ছে অ্যাঙ্গুলারজেএস ১.১.৪ng-attr এ একটি নতুন নির্দেশ যা আপনি সম্ভবত এই ক্ষেত্রে ব্যবহার করতে পারেন।

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

তবে, আপনি যদি 1.0.7 এর সাথে থাকেন তবে আপনি সম্ভবত প্রভাবটি আয়নাতে একটি কাস্টম নির্দেশিকা লিখতে পারেন।

— নাহাত এনগুইন
সূত্র

53

কখনও কখনও শিরোনামের গুণাবলী বা সেই বিষয়ে অন্য কোনও বৈশিষ্ট্যগুলিতে ইন্টারপোলেশন ব্যবহার করা বাঞ্ছনীয় নয়, কারণ এটি দ্রবীভূত হওয়ার আগে পার্স হয়ে যায়। তাই:

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

যদি একটি বাইন্ডিংয়ের সাথে একটি অ্যাট্রিবিউটটি এনজিএআউটআর প্রিফিক্সের সাথে উপসর্গ করা হয় (এনজি-অ্যাট্রি- হিসাবে সংজ্ঞায়িত) তবে বাইন্ডিংয়ের সময় সংশ্লিষ্ট অনির্ধারিত বৈশিষ্ট্যের সাথে প্রয়োগ করা হবে। এটি আপনাকে এমন বৈশিষ্ট্যের সাথে আবদ্ধ হতে দেয় যা ব্রাউজারগুলির দ্বারা অন্যথায় আগ্রহীভাবে প্রক্রিয়া করা হবে। বাঁধাই করা শেষ হলেই অ্যাট্রিবিউট সেট করা হবে। এরপরে উপসর্গটি সরানো হবে:

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

(নিশ্চিত করুন যে আপনি কৌণিকের খুব পূর্ববর্তী সংস্করণটি ব্যবহার করছেন না)। এখানে v1.2.2 ব্যবহার করে একটি ডেমো ফলল রয়েছে:

Fiddle

— AlwaysALearner
সূত্র

3

এখানে সমস্যাটি আপনার অ্যাঙ্গুলারজেএস এর সংস্করণ; 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 ng-app="phonecatApp" ng-controller="PhoneListCtrl">

রেফ: https://docs.angularjs.org/tutorial/step_03

— solidak
সূত্র