Le titre définit la combinaison d'AngularJS et de bootstrap pour implémenter le menu de l'accordéon, qui est en fait le style de bootstrap.
Dans l'article précédent, j'ai introduit la combinaison d'Angular.js et de bootstrap pour implémenter le code de pagination de la table. Apprenez ensuite la démo implémentée.
Pratiquez principalement les commandes personnalisées, transmettez les paramètres dans les commandes et les anciennes règles sont utilisées en premier:
<my-page ng-repeat = "item in Expanders" page-title = "item.title"> {{item.text}} </ my-page>Ce qui précède est ma commande personnalisée. Le menu dispose de 3 titres et contenus et utilise Ng-Repeat pour rendre.
L'API d'instructions de base est la suivante:
app.directive ('myDirective', function () {return {// restrect: par défaut est un (attribut, valeur par défaut) <div my-directive = ''> </ div> e (élément) c (nom de classe) m (commentaire) // En considérant la compatibilité du navigateur Utilisé pour dire à AngularJS de cesser d'instructions sur l'élément actuel qui sont inférieurs à la priorité de commande. Template // Fonction (Telement, TATTRS) {...} modèle: '', // Chargez le modèle de modèle à partir du modèle d'adresse URL spécifié: '', // Si ce paramètre est défini, la valeur doit être truereplace: false, // spécifie la portée de la portée de l'instruction: '', // transclude: '', // string // function (scope, élément, prénat, {...} Controller: '', // Controlleras: '', // exiger: '', // Faire fonctionner le DOM programmatiquement, y compris l'ajout d'écouteurs, etc. iattrs, contrôleur) {}, post: fonction (scope, ielement, iantrrs, contrôleur) {}} // ou return function postLink () {}};};})Comment faire cacher les autres lors du changement? L'utilisation principale de la commande NG-show est d'enregistrer le clic actuel pour masquer d'autres.
Les commentaires de code spécifiques sont les suivants:
<style type = "text / css">. Con {margin: 0 auto; largeur: 600px; margin-top: 100px;}. Panneau {width: 580px;}. Pannel-heading {Cursor: pointeur;} </ 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', remplacer: true: transclude: true, // à transférer le contenu de l'élément vers la portée du modèle: {title: "= pagetitle"}, template: ['<div>', '<div ng-Click = "toggle ();>' '' '<h3 > {{title}} </h3> ',' </div> ',' <div ng-show = "showme" ng-transconte> </div> ',' </div> ']. JOIN (""), link: function (scope, element, attrs) {scpe.showme = false; scope. $ Parent.addexpander (scope); toggle () {scope.showme =! scope.showme; et d'autres acquis par Google. est compatible avec CSS3 et est également compatible avec divers navigateurs (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), JQuery 2.0 et les versions ultérieures ne prendront plus en charge le HTML IE6 / 7/8. Sites Web. «Bootstrap», «Bootstrap, de Twitter, est actuellement un cadre frontal très populaire. est écrit par moins, une langue dynamique CSS. // Enregistrer tous les menus $ scope.addexpander = function (Expander) {expanders.push (expander);}; $ scope.gotoexpander = function (selectedExpander) {expandders.foreach (fonction (item, index) {if (item!