El título establece la combinación de angularjs y bootstrap para implementar el menú de acordeón, que en realidad es el estilo de bootstrap.
En el artículo anterior, introduje la combinación de angular.js y bootstrap para implementar el código de paginación de la tabla. Luego aprenda la demostración implementada.
Principalmente practique comandos personalizados, pase los parámetros en los comandos y las reglas antiguas se usan primero:
<my-page ng-repeat = "item in expanders" page-title = "item.title"> {{item.text}} </page>Lo anterior es mi comando personalizado. El menú tiene 3 títulos y contenidos y usa Ng-Rpeat para renderizar.
La API de instrucción básica es la siguiente:
app.directive ('myDirective', function () {return {// restrict: predeterminado es un (atributo, valor predeterminado) <div my-directive = '' '> </div> e (elemento) c (nombre de clase) m (comentario) // Considerando la compatibilidad del navegador, generalmente usamos un tipo que todos los navegadores saben:' A ', // configuración de prioridad, predeterminado es 0, y la prioridad de mayor prioridad usa la prioridad. Para decirle a AngularJS que deje de ejecutar instrucciones en el elemento actual que sean más bajos que la prioridad del comando. Template // function (Telement, tattrs) {...} Template: '', // Cargue la plantilla de plantilla desde la dirección de URL especificada TemplateUrl: '', // Si este parámetro está configurado, el valor debe ser verdadero: falso, // especificar el alcance del ámbito de instrucción: '' ', // transclude:' ', // string //cope (cope, atreque, especifica el alcance de la instrucción de la instrucción:' ', // TRANSCLUDE:' ', // String // Función (Scope, Specifi OtroInjectables) {...} controlador: '', // controleras: '', // requerir: '', // operar el DOM programáticamente, incluyendo agregar oyentes, etc. enlace: function postlink (scope, iElement, iattrs) {}, // compile: // return un objeto o función de conexión, como se muestra a continuación: function (Temement, tattrs, transcloud iElement, IATTRS, controlador) {}, post: function (scope, iElement, IATTRS, controlador) {}} // o return Función postlink () {}};};})¿Cómo hacer que los demás se oculten al cambiar? El uso principal del comando ng-show es registrar el clic actual para ocultar otros.
Los comentarios del código específico son los siguientes:
<style type = "text/css">. con {margin: 0 auto; width: 600px; margin-top: 100px;}. panel {ancho: 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-confontroller = "myctrl"> <my-page ng-repeat = "elemento en expansores" Page-title = "item.title"> {{item.text}} </page> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"> </script> <script type = "text/javascript"> var = angular.module ('myapp', myapp ', myapp', myapp, myapp ', myapp, myapp', myapp. []); app.directive ('mypage', function () {return {restrict: 'ea', reemplazar: true, transclude: true, // si transferir contenido de elementos a plantilla de plantilla: {title: "= PageTitle"}, plantate: ['<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); toggle () {scope.showme =! Scope.showme; // escondite show scope. $ parent.gotoexpander (alcance);}}};}) app.controller ('myctrl', function ($ scope) {$ scope.expanders = [{title: 'Angularjs', texto: 'Angularjs nació en 2009. Más tarde, adquirido por Google. CSS3, y también es compatible con varios navegadores (es decir, 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery 2.0 y las versiones posteriores no admitirán el navegador IE6/7/8 que permite a los usuarios procesar HTML (una aplicación bajo el nivel de marking estándar), los eventos de la animación y el INTERACTIONES CON VENTALES. Una ventaja relativamente grande que su documentación es muy completa, y varias aplicaciones también se explican en detalle, y también hay muchos complementos maduros para elegir. Desde Twitter, es un marco frontal muy popular. Bootstrap fue muy popular desde su lanzamiento y siempre ha sido un popular proyecto de código abierto en Github, incluidos los MSNBC de la NASA (Microsoft National Broadcasting Corporation). = function (expander) {expanders.push (expander);}; $ scope.gotoExperandrander = function (selectedExpander) {expanders.forEach (function (item, index) {if (item! = selectionExPander) {// ocultar la pestaña no torrente