Jetons un coup d'œil aux rendus d'abord
Tout d'abord, parlons de la nidification des instructions. Comme son nom l'indique, la nidification des instructions signifie que plus de deux instructions sont imbriquées ensemble, comme les suivantes:
<a-deirective> <b-directive> </b-directive> <c-directive> </c-directive> </a-directive>
La commande Fonction Tabs suivante est juste utilisée, ce qui peut rendre le code plus concis.
<! Doctype html> <html lang = "en" ng-app = "docstabsexample"> <éadf> <meta charset = "utf-8"> <itle> </ title> <cript> </ script> <script src = "lib / angular.min.js" type = "text / javascrip src = "lib / angular-route.js" type = "text / javascript"> </ script> <script src = "lib / jquery-2.1.4.min.js"> </ script> <script src = "lib / bootstrap.js" type = "text / javascrip href = "css / bootstrap.css" type = "text / css" /> <ystyle> .active {background: red; } </ style> </ head> <body ng-controller = "AppCon"> <my-tabs> <! - Instruction extérieure -> <my-poane title = "One"> <! - Instruction intérieure -> <h4> un </h4> <p> angularangularangularangular </p> </pane> <my-pane title = "Two"> <! <p> angularangularangularangularangularangular </p> </ my-pane> <my-pane title = "there"> <! - Inner instruction -> <h4> là </h4> <p> bootstrapbootstrapbootstrapbootstrapbootstrap </p> </pane> <my-pane title = "cinq"> <! <p>jqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqu eryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjquetery </my-tabs> </ body> <cript> var app = angular.module ("docstabsexample", ['template']) .Controller ("AppCon", ["$ scope", function ($ scope) {}]) .Directive ("mytabs", function () {return {restrict: "ea", transclude: true, scope: {}, {restrict: "ea", transclude: true, scope:},}, TemplateUrl: "mytabs.html", contrôleur: ["$ scope", fonction ($ scope) {// Utilisez le contrôleur pour permettre à l'instruction la plus intérieure de hériter de l'instruction extérieure, afin que la couche intérieure puisse passer les données entre l'instruction extérieure à travers la conduction de la portée = Angular.ForEach (Panes, fonction (Scope) {// Transférer toutes les instructions de la mémoire et masquer le contenu uniformément. Scope.Selected = false;}); if (panes.length === 0) {$ scope.select (scope);} panes.push (scope); // transmettez le tableau de commande intérieur dans le tableau d'exécution de la commande extérieure. exiger: '^ mytabs', // hériter du modèle d'instruction extérieure: "mypane.html", lien: function (scope, elemenet, attrs, mytabsController) {mytabsController.addscope (scope); // sauvegarde la foule de l'instruction intérieure dans l'instruction extérieure et laisse le trait extérieur. Angular.module ("template", []) .run (["$ templateCache", fonction ($ templateCache) {$ templatecache.put ("mytabs.html", "<div class = 'table'>" + "<ul class = 'nav-tabs'>" + "<li ng-repeat = 'pane dans scopes' ng-class = '{active: Pane.selected}'> "+" <a href = '#' ng-click = 'select (pane)'> {{Pane.Tittle}} <a/> "+" </li> "+" </ul> "+" <div ng-transclude class = 'tab-content'> </v> "+" + ")") .run (["$ templateCache", function ($ templateCache) {$ templatecache.put ("mypane.html", "<div class = 'Table-Pane' ng-show = 'sélectionné' ng-transclude>" + "</div>")}]) </script> </html> Le principe de mise en œuvre de l'ensemble de l'instruction est d'exposer scope de l'instruction intérieure à l'instruction extérieure à travers l'héritage de l'instruction, afin que l'affichage de l'instruction intérieure puisse être contrôlé dans l'instruction extérieure. Il y a une autre chose à expliquer ici. Afin de rendre les instructions plus hiérarchiques et logiques, ng-transclude est utilisé pour permettre au contenu template des instructions d'être inversé en contenu marqué ng-transclude .
Conclusion
Ok, ce qui précède est tout au sujet de la mise en œuvre des onglets de la fonction de commutation à travers les instructions. L'avez-vous appris? J'espère qu'il sera utile à tout le monde d'apprendre AngularJS. Si vous avez des questions, vous pouvez laisser un message pour communiquer. Merci pour votre soutien à wulin.com.