القراءة الموصى بها: شرح مفصل لمربع الحوار AngularJS Modal
$ Modal هي خدمة يمكنها إنشاء نوافذ مشروطة بسرعة ، وإنشاء جزء من الصفحات ، ووحدات التحكم ، وربطها.
$ modal لديه طريقة واحدة فقط مفتوحة (خيارات)
TEMPLATEURL: عنوان النافذة المشروطة
قالب: يستخدم لعرض علامات HTML
النطاق: استخدام المحتوى مع نطاق مشروط (في الواقع ، سيقوم $ Modal بإنشاء حطة فرعية للنطاق الحالي) افتراضيًا هو $ rootscope
وحدة التحكم: تقوم وحدة التحكم المحددة لـ $ modal ، بتهيئة نطاق $ ، والتي يمكن حقنها باستخدام $ modalinstance
حل: حدد عضوًا ونقله إلى وحدة التحكم المحددة بواسطة $ modal. وهو ما يعادل خاصية RESLOVE للطرق. إذا كنت بحاجة إلى تمرير كائن كائن ، فأنت بحاجة إلى استخدام angular.copy ()
الخلفية: التحكم في الخلفية ، القيم المسموح بها: صواب (افتراضي) ، خطأ (بدون خلفية) ، "ثابت" - الخلفية ، ولكن عند النقر خارج نافذة المشرف ، لا تغلق النافذة المشروطة
لوحة المفاتيح: عندما يتم الضغط على ESC ، سواء كان مربع الحوار الوسيط مغلقًا ، فاعلي
WindowClass: حدد فئة وأضفها إلى النافذة المشروطة
تقوم الطريقة المفتوحة بإرجاع مثيل مشروط ، والذي يحتوي على الخصائص التالية
أغلق (النتيجة): أغلق النافذة الوسيطة وتمرير النتيجة
رفض (سبب): التراجع عن طريقة الوسائط وتمرير سبب
النتيجة: عقد يتم تمريره عند إغلاق النافذة المشروطة أو إلغاؤه
فتح: عقد ، متغير تم تمريره عند فتح النافذة المشروطة ويتم تحميل المحتوى
بالإضافة إلى ذلك ، يمتد $ modalinstance طريقتين $ إغلاق (نتيجة) ، $ refisiss (السبب) ، والتي تغلق بسهولة النوافذ ولا تتطلب وحدات تحكم إضافية
HTML
<! doctype html> <html ng-app = "modaldemo"> <head> <title> </title> <link href = "lib/bootstrap/css/boutstrap.min.css src = "lib/bootstrap-gh-pages/ui-bootstrap-tpls -... min.js"> </script> <script src = "lib/angular/in/angular-locale_zh-cn.js"> </script> </hege> <body> <body-controller = "modaldemoctrl" id = "mymodalContent.html"> <v> <h> أنا مشروط! </h> </viv> <viv> <ul> <li ng-repeat = "item in heads"> <a nglick = "select.item = item"> {{} <div> <button ng-click = "ok ()"> ok </utton> <button ng click = "cancel ()"> إلغاء </button> </div> </script> <button ng-click = "open ()" var modaldemoctrl = function (scope $ ، $ modal ، $ log) {$ scope.items = ['item' ، 'item' ، 'item'] ؛ $ scope.open = function () {var modalinstance = $ modal.open ({templateurl: 'mymodalcontent.html' ، controller: modalinstancectrl ، حل: {العناصر: function () {return $ scope.items ؛}}) ؛ modalinstance.opened.then (function () {// يتم تنفيذ الوظيفة التي تم تنفيذها بعد فتح النافذة الوسيطة و console.log ('modal مفتوح') ؛}) ؛ modalinstance.result.then (function (result) {console.log (result) ؛} ، الدالة (العقل) {console.log (سبب) ؛ // انقر على المنطقة الفارغة ، سيتم دائمًا إخراج النقر الخلفي. }) ؛ } ؛ } ؛ var modalinstancectrl = function ($ scope ، $ modalinstance ، items) {$ scope.items = heads ؛ $ scope.selected = {item: $ scope.items []} ؛ $ scope.ok = function () {$ modalinstance.close ($ scope.selected) ؛ } ؛ $ scope.cancel = function () {$ modalinstance.dismiss ('cancel') ؛ } ؛ } ؛ </script> </body> </html>ما ورد أعلاه هو المحتوى ذي الصلة لمربع وضع AngularJS المنبثق (النموذج) الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!