دعونا نلقي نظرة على العروض أولاً
بادئ ذي بدء ، دعنا نتحدث عن تعشيش التعليمات. كما يوحي الاسم ، فإن تعشيش التعليمات يعني أن أكثر من تعليمين متداخلين معًا ، مثل ما يلي:
<A-DiRive> <b-directive> </b-directive> <c-directive> </c-directive> </a-directive>
يتم استخدام أمر وظيفة علامات التبويب التالية فقط ، والذي يمكن أن يجعل الكود أكثر إيجازًا.
<! doctype html> <html lang = "en" ng-app = "docstabsexample"> <head> <meta charset = "utf-8"> <title> </title> <script> </cript> <script src = "lib/Angular.min.js" type = " src = "lib/Angular-Route.js" type = "text/javaScript"> </script> <script src = "lib/jquery -2.1.4 href = "css/bootstrap.css" type = "text/css"/> <style> .active {background: red ؛ } </style> </head> <body ng-controller = "appcon"> <-tabs> <!-التعليمات الخارجية-> <my-pane title = "one"> <! <p> Angularangularangularangularangularangular </p> </my-pane> <my-pane title = "eque"> <! <p>jqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqu eryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjquery</p> </my-tabs> </body> <script> var app = Angular.Module ("docstabsexample" ، ['template']) .Controller ("appcon" ، ["$ scope" ، function ($ scope) {}]). templateUrl: "mytabs.html" ، وحدة التحكم: ["$ scope" ، الوظيفة (نطاق $) {// استخدم وحدة التحكم للسماح لتعليمات الأعمق براث التعليمات الخارجية ، بحيث يمكن للطبقة الداخلية نقل البيانات بين تعليمات خارجية من خلال Scope التوصيل المتنوع = $ spec.scopes = [] Angular.foreach (الأجزاء ، الوظيفة (النطاق) {// نقل جميع تعليمات الذاكرة وإخفاء المحتويات بشكل موحد. if (pares.length === 0) {$ scope.select (scope) ؛ يتطلب: '^mytabs' ، // ورث templateurl التعليمات الخارجية: Angular.Module ("template" ، []) .Run (["$ templatecache" ، function ($ templatecache) {$ templatecache.put ("mytabs.html" ، "<div class = 'table'>" + " ng-class = '{Active: pane.selected}'> " +" <a href = '#' ng click = 'select (pane)'> {{pane.tittle}}} <a/> .run (["$ templatecache" ، function ($ templatecache) {$ templatecache.put ("mypane.html" ، "<div class = 'table-pane' ng-show = 'selected' ng-transclud يتمثل مبدأ التنفيذ في التعليمات بأكمله في فضح scope التعليمات الداخلية للتعليم الخارجي من خلال ميراث التعليمات ، بحيث يمكن التحكم في عرض التعليمات الداخلية في التعليمات الخارجية. هناك شيء آخر يجب شرحه هنا. من أجل جعل الإرشادات أكثر هرمية ومنطقية ، يتم استخدام ng-transclude للسماح بمحتوى template من التعليمات أن يتم قلبها في المحتوى المميز ng-transclude .
خاتمة
حسنًا ، ما ورد أعلاه هو كل شيء عن AngularJs تنفيذ وظيفة تبديل علامات التبويب من خلال التعليمات. هل تعلمت ذلك؟ آمل أن يكون من المفيد للجميع أن يتعلموا AngularJS. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل. شكرا لك على دعمك إلى wulin.com.