Der Titel setzt die Kombination von AngularJS und Bootstrap für die Implementierung des Akkordeon -Menüs, das tatsächlich der Stil der Bootstrap ist.
Im vorherigen Artikel habe ich die Kombination von Angular.js und Bootstrap zur Implementierung von Tabellenpagierungscode eingeführt. Dann lernen Sie die implementierte Demo.
Üben Sie hauptsächlich benutzerdefinierte Befehle, übergeben Sie Parameter in Befehle und die alten Regeln werden zuerst verwendet:
<my-Page ng-repeat = "item in expaners" page-title = "item.title"> {{item.text}} </my-Page>Das obige ist mein individueller Befehl. Das Menü verfügt über 3 Titel und Inhalte und verwendet NG-Wiederholungen, um das Rendern zu erhalten.
Die grundlegende Anweisungs -API lautet wie folgt:
app.directive ('mydirective', function () {return {// einschränken: Standard ist ein (Attribut, Standardwert) <div my-directive = ''> </div> e (Element) c (Klassenname) m (Kommentar) // Betrachten Sie die Kompatibilität der Browser-Kompatibilität. Wir verwenden normalerweise einen Typ, der alle Browser. Der Parameter wird verwendet, um AngularJs zu unterscheiden, die Anweisungen auf dem aktuellen Element nicht mehr als die Befehlspriorität ausführen sollen. 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) oder iattrs, Controller) {}, post: function (scope, ielement, iattrs, controller) {}} // oder return function postlink () {}};};};})Wie kann man beim Wechsel andere versteckt? Die Hauptverwendung des Befehls ng-show besteht darin, das aktuelle Klick aufzuzeichnen, um andere auszublenden.
Die spezifischen Code -Kommentare sind wie folgt:
<style type = "text/css">. con {margin: 0 auto; width: 600px; margin-top: 100px;}. panel {width: 580px;}. 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 Expansions". 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 = "text =" text/javascript "> var appl. []); app.directive ('myPage', function () {retrict {crestrict: 'ea', ersetzen: true, transclude: true, // ob Elementinhalte in Template Scope: {title: "= pagetitle"}, Vorlage: ['<div>', '<div ng-click = ",); > {{title}} </h3> ',' </div> ',' <div ng-show = "showme" ng-transclude> </div> ',' </div> ']. join (""), link: function (scope, element) {scope.showme = scope. Toggle () {scope.showme =! scope.showme; andere. Mit CSS3 kompatibel und ist auch mit verschiedenen Browsern (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) kompatibel, JQuery 2.0 und nachfolgende Versionen können IE6/7/8 -Browser nicht mehr unterstützen. JQuery hat einen relativ großen Vorteil, dass seine Dokumentation sehr umfassend ist, und es werden auch verschiedene Anwendungen erläutert, und es gibt auch viele ausgereifte Plug-Ins. 'Bootstrap aus Twitter ist ein sehr beliebter Front-End-Frontwork. Dynamische CSS-Sprache $ scope.addexpander = function (expander) {expanders.push (expander);}; $ scope.gotoExpander = function (selectedExpander) {expanders.foreach (function (function (itel) {if (item!