Angular.js and Bootstrap to realize accordion menu code _ANGULARJS

The title is Angularjs and Bootstrap combined to achieve the accordion menu, in fact, is the use of the bootstrap style.

In the previous article to introduce the angular.js and bootstrap combined implementation of the table pagination code. Then learn to implement the demo.

The main practice of custom instructions, to pass parameters to the instructions, the usual first effect chart:

Above is my custom instruction, the menu exists the title and the content 3 uses the Ng-repeat to render.

The instruction basic API is as follows:

App.directive (' mydirective ', function () {return {//restrict: Default to A (property, default) <div my-directive= ' ></div> E (Element) C (class name) M (note)//This takes into account the compatibility of browsers usually we use all browsers to recognize the type a restrict: ' A ',//priority setting, default is 0, larger priority call priority:0,// This parameter is used to tell Angularjs to stop running an instruction that is lower priority than this instruction on the current element.
However, instructions that are the same as the current instruction priority are 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, TElement and Tattrs, and returns a string representing the template//function (TElement, Tattrs) {...} template: ',//load template from specified URL address templateurl: ',//If this parameter is set, the value must be true R Eplace:false,//Specify scope scope of the directive: ',//transclude: ',//string//function (scope, element, Attrs, transclude, otherinjecta bles) {...} controller: ',//Controlleras: ',//require: ',//To manipulate the DOM programmatically, including adding listeners link:function postlink (scope, IE Lement, Iattrs) {},//compile://Returns an object or Join function as follows: function (TElement, tattrs, transclude) {return {pre:function (scope , IElement, Iattrs, controller) {}, Post:function (scope, ielement, Iattrs, controller) {}}}/or Return function Postl
Ink () {}};
};  })

How to switch the time let other hide it, here mainly uses the instruction Ng-show, records the current clicks, hides the other.

Specific code comments are as follows:

<style type= "Text/css" > con {margin:0 auto; width:600px; margin-top:100px;}. panel {width:580px;. panel-h eading {cursor:pointer} </style> <link rel= "stylesheet" href= "http://apps.bdimg.com/libs/bootstrap/3.3.4/" Css/bootstrap.min.css "/> <div class=" con "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 into the template scope: {t Itle: "=pagetitle"}, Template: [' <div class= ' panel panel-info ' > ', ' <div class= ' panel-heading ' ng-click= ' Toggle (); " > ', '