Let's take a look at the effect chart.
First of all, to say that the instruction nesting, the directive nested as the name implies is more than two instructions nested together, such as the following:
<A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive>
The following tabs function instructions, just to use this, 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> <!-The outermost command->
<my-pane tittle = "ONE"> <!-Inner Command->
<h4> One </ h4>
<p> angularangularangularangularangularangularangularangular </ p>
</ my-pane>
<my-pane tittle = "TWO"> <!-Inner Command->
<h4> Two </ h4>
<p> angularangularangularangularangularangularangularangular </ p>
</ my-pane>
<my-pane tittle = "THERE"> <!-Inner Command->
<h4> There </ h4>
<p> bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap </ p>
</ my-pane>
<my-pane tittle = "FIVE"> <!-Inner Command->
<h4> five </ h4>
<p> jqueryjqueryjqueryjqueryjqueryjqueryjquery </ p>
</ my-pane>
</ 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 the controller to let the innermost command inherit the outer command, so that the inner layer can transfer data with the outer command through the transmission of the scope
var panes = $ scope.scopes = []; //
$ scope.select = function (pane) {// Realize the tabs function
angular.forEach (panes, function (scope) {// Traverse all memory instruction scopes, and hide content uniformly.
scope.selected = false;
});
pane.selected = true; // Through 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); // Put the inner instruction array into the outer instruction scope array.
}
}]
}
})
.directive ("myPane", function () {
return {
restrict: 'EA',
scope: {
tittle: '@'
},
transclude: true,
require: '^ myTabs', // Inherit the outer command
templateUrl: "myPane.html",
link: function (scope, elemenet, attrs, myTabsController) {
myTabsController.addScope (scope); // Save the scope of the inner instruction to the outer instruction, let the outer 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 whole instruction is to pass the instruction inheritance, expose the inner instructionscopeto the outer instruction, so that the outer instruction can control the display of the inner-layer instruction. Here there is another to explain, in order to make the instructions more hierarchical, more logical, useng-transclude, let the content of thetemplateinstruction, reverse inserted intong-transcludethe content of the marked.
Conclusion
Well, the above is angularjs through the instructions to achieve tabs switching function of the entire content, we have learned it? Hope to learn Angularjs can help you, if you have questions can be exchanged message. Thank you for your support to the cloud-dwelling community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
