O título define a combinação de AngularJS e Bootstrap para implementar o menu de acordeão, que é realmente o estilo de bootstrap.
No artigo anterior, introduzi a combinação de Angular.js e Bootstrap para implementar o código de paginação da tabela. Em seguida, aprenda a demonstração implementada.
Pratique principalmente comandos personalizados, passa parâmetros para comandos e as regras antigas são usadas primeiro:
<my-página ng-repeat = "Item em expansores" página-title = "item.title"> {{item.text}} </my-page>O acima é o meu comando personalizado. O menu possui 3 títulos e conteúdos e usa o NG-REPEAT para renderizar.
A API de instrução básica é a seguinte:
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 O parâmetro é usado para informar o AngularJs para parar de executar as instruções no elemento atual que são inferiores à prioridade do comando. 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) {...} controlador: '', // controladores: '', // requer: '', // opera o DOM programaticamente, incluindo a adição de ouvintes, etc. Link: function PostLink (escopo, iElement, IATTRS) {}, // Compile: // Retorne uma função de conexão ou conexão, abaixo: FUNCIMENTO (TEMEMENT, TTTRS, TTTRS, // Compile: // Retornar uma função de conexão, como mostrado: FUNCIMENTO (TEMEMENT, TTTRS, TTTR, iattrs, controlador) {}, post: function (escopo, ielement, iattrs, controlador) {}} // ou retorna função postLink () {}};};})Como deixar os outros escondidos ao mudar? O principal uso do comando ng-show é gravar o clique atual para ocultar outros.
Os comentários específicos do código são os seguintes:
<style type = "text/css">. CON {margem: 0 Auto; largura: 600px; margem-top: 100px;}. Painel {width: 580px;}. Cabeça de painel {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-pape ng-repeat = "Item nos expandistas" página-title = "item.title"> {{item.text}} </my-page> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.5.0-teta.0/angular.jscript"> </script> < angular.module ('myApp', []); App.Directive ('myPage', function () {return {restrive: 'ea', substitua: true, transclude: true, // se deve transferir o conteúdo do elemento para o modelo: {title: "= pagetitle"}, modelo: ['<div>', ',' <DV como > {{title}} </h3> ',' </div> ',' <div ng-show = "showMe" ng-transclude> </div> ',' </div> ']. junção (""), link: function (scope, elemento, atts) {scope.showme = scope; Toggle () {scope.showme =! scope.showme; e outros adquiridos pelo Google. É compatível com CSS3 e também é compatível com vários navegadores (ou seja, 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), JQuery 2.0 e versões subsequentes não suportarão mais o IE6/7/8 Browser. Os sites. Atualmente, o Twitter é uma estrutura de front-end muito popular. está escrito por um idioma CSS dinâmico. // Registre todos os menus $ scope.adDexpander = function (expansor) {expanders.push (expansor);}; $ scope.gotoexpander = function (selectedExpander) {expandores.foreach (itens, itens, Índice) {if (item! false;}})}}); </script>