제목은 AngularJS와 Bootstrap의 조합을 설정하여 실제로 부트 스트랩의 스타일 인 아코디언 메뉴를 구현합니다.
이전 기사에서는 angular.js와 bootstrap의 조합을 소개하여 테이블 페이지 매김 코드를 구현했습니다. 그런 다음 구현 된 데모를 배우십시오.
주로 사용자 정의 명령을 연습하고 매개 변수를 명령으로 전달하며 이전 규칙이 먼저 사용됩니다.
<my-page ng-repeat = "expanders의 항목"page-title = "item.title"> {{item.text}} </my-page>위는 내 사용자 정의 명령입니다. 메뉴에는 3 개의 제목과 내용이 있으며 NG-Repeat를 사용하여 렌더링합니다.
기본 명령 API는 다음과 같습니다.
app.directive ( 'mydirective', function () {return {// restrict : default is a (속성, 기본값) <div my-directive = ''> </div> e (class name) m (comment) m (comment) m (comment) // 모든 브라우저가 알고있는 유형을 사용합니다 : 'a', // default,/////////////////// 매개 변수는 현재 명령과 동일한 우선 순위를 가진 현재 요소에 대한 지침을 실행하는 것을 중지하는 데 사용됩니다. 템플릿 // 함수 (telement, tattrs) {...} template : '', // 지정된 URL 주소에서 템플릿 템플릿을로드하십시오. '', //이 매개 변수가 설정되면 값은 truereplace : // 명령 스코프의 범위를 지정해야합니다. {...} 컨트롤러 : '', // controlleras : ', // Quesure :' ',' ', // 청취자 등을 포함하여 프로그래밍 방식으로 DOM을 작동합니다. 링크 : 링크 : 링크 : 링크 (스코프, IELEMENT, IATTRS) {}, // compile : // 객체 또는 연결 함수를 반환합니다. (telement, tattrs, transclud) {return, return {pre, : pre, : retain {return {return {return {return {return, transclude). IATTRS, 컨트롤러) {}, post : function (scope, ielment, iAttrs, 컨트롤러) {}} // 또는 return function postLink () {}};};})전환 할 때 다른 사람을 숨기는 방법? NG-SHOW 명령의 주요 사용은 현재 클릭을 기록하여 다른 클릭을 숨기는 것입니다.
특정 코드 주석은 다음과 같습니다.
<스타일 유형 = "text/css">. con {margin : 0 auto; width : 600px; margin-top : 100px;}. 패널 {너비 : 580px;}. 패널 헤드 {커서 : 포인터;} </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"> <mypage ng-repeat = "Experfer in Experfers" 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"> Angular.Module ( 'myApp', []); app.Directive ( 'myPage', function () {return {return {return {extrict : 'ea', rowning : true, transclude : true, // 템플릿 스코프로 전송 할 것인지 : "= pagetitle"}, template : [ '<div>', '<<<<<<<<<<,' '<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<; > {title}} </h3> ','</div> ','<div ng-show = "showme"ng-transclude> </div> ','</div> '] Toggle () {scope.showme =! scope.showme; // show scope를 숨기고 $ parent.gotoexpander (scope);}})) app.controller ($ scope ($ scope) {$ scope.expanders = 'angularjs' 그리고 나중에 Google은 많은 Google 제품에 사용 된 우수한 프론트 엔드 JS 프레임 워크입니다 CSS3과 호환되며 다양한 브라우저 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery 2.0 및 후속 버전과도 호환됩니다. IE6/7/8 브라우저는 더 이상 HTML (표준 마크 언어 하에서 응용 프로그램)을 제공 할 수 있습니다. JQuery는 문서화가 매우 포괄적이며 다양한 응용 프로그램이 자세히 설명되어 있으며, jQuery는 HTML 컨텐츠와 분리 할 수있는 많은 성숙한 플러그인이 있습니다. 'Twitter의 Bootstrap은 현재 HTML, CSS 및 JavaScript를 기반으로합니다. CSS Language는 출시 이후 매우 인기가 있으며 Github에서 인기있는 오픈 소스 프로젝트는 NASA의 MSNBC (Microsoft National Broadcasting Corporation)를 포함하여 국내 모바일 개발자에게 더 친숙한 Framected Framection을 기반으로합니다 $ scope.addexpander = function (expander) {expanders.push (expander);}; $ scope.gotoexpander = function (selectedExpander) {expanders.foreach (function (item, index) {if (item! = selectedExpander) {// 숨기기 탭 item.showme = false}))))))}}}}}}}}}