The title sets the combination of angularjs and bootstrap to implement the accordion menu, which is actually the style of bootstrap.
In the previous article, I introduced the combination of Angular.js and Bootstrap to implement table pagination code. Then learn the demo implemented.
Mainly practice custom commands, pass parameters into commands, and the old rules are used first:
<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>The above is my customized command. The menu has 3 titles and contents and uses ng-repeat to render.
The basic instruction API is as follows:
app.directive('myDirective',function(){return {//restrict: Default is A (attribute, default value) <div my-directive=''></div> E (element) C (class name) M (comment) // Considering browser compatibility, we usually use A type that all browsers know: 'A', //Priority setting, default is 0, and the larger priority call priority: 0,//This parameter is used to tell AngularJS to stop running instructions on the current element that are lower than the command priority. However, instructions with the same priority as the current command will still be executed. terminal: false, //String or function: String <a></a>(directive content)//Note: There must be a root DOM element//A function that can accept two parameters, the parameters are tElement and tAttrs, and a string representing the template//function(tElement, tAttrs) { ... }template: '', //Load the template template from the specified url address templateUrl: '',//If this parameter is set, the value must be truereplace: false,//Specify the scope of the instruction scope:'',//transclude:'',//string//function(scope, element, attrs, transclude, otherInjectables) { ... }controller:'',//controllerAs: '',//require: '',//operate the DOM programmatically, including adding listeners, etc. link: function postLink(scope, iElement, iAttrs) {},//compile: // Return an object or connection function, as shown below: function(tElement, tAttrs, transclude) {return {pre: function(scope, iElement, iAttrs, controller) { },post: function(scope, iElement, iAttrs, controller) { }}// Or return function postLink() { }};};})How to make others hidden when switching? The main use of the command ng-show is to record the current click to hide other ones.
The specific code comments are as follows:
<style type="text/css">.con {margin: 0 auto;width: 600px;margin-top: 100px;}.panel {width: 580px;}.panel-heading {cursor: pointer;}</style><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" /><div ng-app="myApp" ng-controller="myCtrl"><my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page></div><script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script><script type="text/javascript">var app = angular.module('myApp', []);app.directive('myPage', function () {return {restrict: 'EA',replace: true,transclude: true, //Whether to transfer element content to template scope: {title: "=pageTitle"},template: ['<div>','<div ng-click="toggle();">','<h3 >{{title}}</h3>','</div>','<div ng-show="showMe" ng-transclude></div>','</div>'].join(""),link: function (scope, element, attrs) {scope.showMe = false;scope.$parent.addExpander(scope); //Save all menus scope.toggle = function toggle() {scope.showMe = !scope.showMe; //Hide show scope.$parent.goToExpander(scope);}}};})app.controller('myCtrl', function ($scope) {$scope.expanders = [{title: 'AngularJS',text: 'AngularJS was born in 2009 and was created by Misko Hevery and others. Later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products. AngularJS has many features, and the most core ones are: MVVM, modular, automated two-way data binding, semantic tags, dependency injection, etc.'}, {title: 'jQuery',text: 'JQuery is another excellent Javascript library after prototype. It is a lightweight js library, it is compatible with CSS3, and is also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery 2.0 and subsequent versions will no longer support IE6/7/8 browser. jQuery allows users to process HTML (an application under standard universal markup language), events, achieve animation effects, and conveniently provide AJAX interaction for websites. jQuery has a relatively large advantage that its documentation is very comprehensive, and various applications are also explained in detail, and there are also many mature plug-ins to choose from. jQuery can keep the user's html page separate from the html content, that is, there is no need to insert a bunch of js into the html to call commands, just define the id. '}, {title: 'Bootstrap',text: 'Bootstrap, from Twitter, is currently a very popular front-end framework. Bootstrap It is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster. It is developed by Twitter designer Mark Otto and Jacob Thornton. It is a CSS/HTML framework. Bootstrap provides elegant HTML and CSS specifications, which is written by Less, a dynamic CSS language. Bootstrap was very popular since its launch and has always been a popular open source project on GitHub, including NASA's MSNBC (Microsoft National Broadcasting Corporation) Breaking News. Frameworks that are more familiar to domestic mobile developers, such as the WeX5 front-end open source framework, are also based on the Bootstrap source code for performance optimization. '}];var expanders = []; //Record all menus $scope.addExpander = function (expander) {expanders.push(expander);};$scope.goToExpander = function (selectedExpander) {expanders.forEach(function (item, index) {if (item != selectedExpander) { //Hide non-current tab item.showMe = false;}})}});</script>