Let's take a look at the renderings first
First of all, let’s talk about instruction nesting. As the name suggests, instruction nesting means more than two instructions are nested together, such as the following:
<A-deirective> <B-directive></B-directive> <C-directive></C-directive></A-directive>
The following tabs function command is just used, which can make the code more concise.
<!DOCTYPE html><html lang="en" ng-app="docsTabsExample"><head> <meta charset="UTF-8"> <title></title> <script></script> <script src="lib/angular.min.js" type="text/javascript"></script> <script 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/javascript"></script> <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/> <style> .active{ background: red; } </style></head><body ng-controller="appCon"> <my-tabs><!--outer instruction--> <my-pane title="ONE"><!--inner instruction--> <h4>One</h4> <p>angularangularangularangular</p> </my-pane> <my-pane title="TWO"><!--inner instruction--> <h4>Two</h4> <p>angularangularangularangularangularangular</p> </my-pane> <my-pane title="THERE"><!--Inner instruction--> <h4>There</h4> <p>bootstrapbootstrapbootstrapbootstrapbootstrap</p> </my-pane> <my-pane title="FIVE"><!--Inner instruction--> <h4>five</h4> <p>jqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjqueryjquery</p> </my-tabs></body><script> var app=angular.module("docsTabsExample",['template']) .controller("appCon",["$scope",function($scope){ }]) .directive("myTabs", function () { return{ restrict:"EA", transclude: true, scope:{}, templateUrl:"myTabs.html", controller:["$scope", function ($scope) {//Use controller to allow the innermost instruction to inherit the outer instruction, so that the inner layer can pass data between the outer instruction through scope conduction var panes = $scope.scopes = [];// $scope.select= function (pane) {//Implement tabs function angular.forEach(panes, function (scope) { //Transfer all memory instructions scope and hide the contents uniformly. scope.selected=false; }); pane.selected=true;//Use ng-repeat only}; this.addScope= function (scope) {//Inherited by the inner command, pass the scope of the inner command to the outer command for control if(panes.length===0){ $scope.select(scope); } panes.push(scope);//Pass the inner command array into the outer command scope array. } }] } }) .directive("myPane", function () { return{ restrict:'EA', scope:{ title:'@' }, translate: true, require:'^myTabs',//Inherit the outer instruction templateUrl:"myPane.html", link: function (scope, elemenet,attrs,myTabsController) { myTabsController.addScope(scope);//Save the scope of the inner instruction into the outer instruction and let the outer layer traverse. } } }); angular.module("template",[]) .run(["$templateCache", function ($templateCache) { $templateCache.put("myTabs.html","<div class='table'>" + "<ul class='nav nav-tabs'>" + "<li ng-repeat='pane in scopes' ng-class='{active:pane.selected}'>" + "<a href='#' ng-click='select(pane)'>{{pane.tittle}}<a/>" + "</li>" + "</ul>" + "<div ng-transclude class='tab-content'></div>" + "</div>") }]) .run(["$templateCache", function ($templateCache) { $templateCache.put("myPane.html","<div class='table-pane' ng-show='selected' ng-transclude>" + "</div>") }])</script></html> The implementation principle of the entire instruction is to expose scope of the inner instruction to the outer instruction through the inheritance of the instruction, so that the display of the inner instruction can be controlled in the outer instruction. There is another thing to be explained here. In order to make the instructions more hierarchical and logical, ng-transclude is used to allow the template content of the instructions to be inverted into the content marked ng-transclude .
Conclusion
OK, the above is all about AngularJS implementing the tabs switching function through instructions. Have you learned it? I hope it will be helpful to everyone to learn AngularJS. If you have any questions, you can leave a message to communicate. Thank you for your support to Wulin.com.