Angular در یک نگاه – Directive – بخش چهارم

Angular در یک نگاه – Directive – بخش چهارم

ng-init

به خاطر دارید که چطور یک متغیر را در expression مقداردهی اولیه کردیم؟ خوب، درست حدس زده اید: برای این کار هم دستور دهنده یا directive وجود دارد. با دستوردهنده ng-init شما می توانید متغیرها را مقدارهی اولیه کنید، که می توان از هر جای درون عنصر که به آن اختصاص داده شده است، به آن متغیر دسترسی داشته باشید.

نتیجه مثال بالا به صورت زیر خواهد بود:

با استفاده از ; می توانید چندین متغیر که دوست دارید مقدار دهی کنید:

خروجی:

در برخی موارد، بهتر است که متغیرهای خود را به عنوان ویژگی یا خواص یک شی تعریف کنید.

خروجی: 

آرایه ها هم مفید هستند.

خروجی:

توجه داشته باشید که نام های مشخصه خود را در هنگام نوشتن کدهای Angular به دقت انتخاب کنید. شاید با نگاه کردن به کد زیر به خطاهای فاحش آن پی ببرید، اما انتظاری نداشته باشید که Angular در این مورد کمکی کند. بی سر و صدا تمام خطاهای دسترسی به مشخصه ها را نادیده می گیرد، از جمله مشخصه های تو در تو و دسترسی خارج از محدوده آرایه.

خروجی:

شاید فکر کنید Angular آزاد به انجام هر کاری است، پس آیا فکر می کنید مجاز به تعریف تابع ها در ng-init هستیم؟ چه حدس می زنید؟

خروجی:

نــه، تعریف تابع فوق امکان پذیر نمی باشد. درحالی که تلاش به اجرای آن در ng-init داشته باشید، Angular خطای parse:syntax$ را نشان می دهد که می توان این خطا را در کنسول مرورگر خود مشاهده کرد. بهترین مکان برای تعریف تابع ها برای استفاده عبارات Angular قرار دادن آنها در controller است، در فصل آینده به کنترل کننده ها می پردازیم. در وافع، controller جایگاه مناسبی برای آماده سازی داده های برنامه برای نمایش دادن است.

ng-non-bindable

با این حال، اگر نیاز است Angular برخی از بخش های صفحه شما را مورد بررسی قرار دهید، اضافه کردن ng-non-bindable به یک عنصر باعث می شود محتوای آن از مورد پردازش قرار گرفتن توسط Angular در امان باشد.

خروجی:

برای درک بهتر، دستوردهنده ng-non-bindable را از مثال بالا حذف کنید تا ببینید چه اتفاقی می افتد.

ng-show

حال زمان آن فرا رسیده است که چیزهایی بیش از انجام رندر کردن عبارات با هم کار کنیم. برای شروع، چطور می توانیم نمایش یا مخفی کردن یک عنصر HTML را شرطی کنیم؟

چند وقتی از که مشغول کار با AngularJS هستم، در اوایل استفاده من از Angular، نیاز داشتم که بعد از ارسال موفقیت آمیز فرم کاربر، آن فرم را مخفی کنیم. برای این کار در داخل یک controller کدی داشتم که مسئولیت رسیدگی به عمل کاربر بود، من ()jQuery.hide را اضافه کردم. البته که کار کرد! وقتی که شما با Angular در قالب یک پروژه کار می کنید، گاهی اوقات نیاز دارید که عملگر و واقع بین باشید. به هر حال، بعد از اینکه قدم به قدم با Angular آشنا شدم، با خودم گفتم که حتما باید دستوردهنده ای برای این کار وجود داشته باشد، که در واقع با دو دستوردهنده ng-hide و ng-show آشنا شدم.

این دو را در مثال زیر بطور هم زمان نشان می دهیم.

خروجی:

مقدار را به true و false تغییر دهید تا ببینید چه اتفاقی رخ می دهد. از آنجایی که Angular تغییرات را زیر نظر دارد، شما می توانید متغیر authorized را در هر جایی که به آن نیاز دارید قرار دهید و view آن را برای کاربر به روزرسانی می کند.

خوب، امیدوارم اندکی توانسته باشم شما را با Angular آشنا کنیم، تنها به این پست ها بسنده نکنید، بهترین مستندات را در وب سایت Angular مطالعه کنید. در قسمت بعد با Scopes آشنا می شویم.