1. 일반 지침을 통해 태그 페이지를 구현하십시오
<link rel = "Stylesheet"href = "views/show/tab.css"/> <div> <ul ng-init = "vm.Activetab = 1"> <li ng class = "{active : vm.ActiveTab == 1}"> <a href = "javaScript :;" ng-click = "vm.activetab = 1"> tag1 </a> </li> <li ng class = "{active : vm.activetab == 2}"> <a href = "javaScript :;" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng-show = "vm.Activetab = 2}"> <a href = "javaScript :" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng-show = "vm.Activetab = 2}"> <a href = "javaScript :" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng-show = "vm.Activetab == 1"> tag 1 </div> <div ng-show = "vm.Activetab == 2"> tag 2 </div> </div> <h3> 설명 </h3> HIGH3의 내용은 여기에 있습니다. 부트 스트랩. <hr/> angular-bootstrap의 탭 세트 지시문을 통해 구현 될 수 있습니다. <a href = "http://angular-ui.github.io/bootstrap/#/tabs"target = "_ blank"> 공식 데모 </a> '사용 strict '; angular.module ('ngshowcaseapp '). 컨트롤러 ('ctrl.show.tab ', function ($ scope) {var vm = $ scope.vm = {};});. tab-bordered {border : 1px solid lightgray; 테두리 : 없음; 패딩 : 15px; Border-Radius : 0 0 4px 4px;}2. 사용자 정의 명령 구현 태그 페이지
<! doctype html> <html lang = "en"ng-app = "demo"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js"type = "text/javascript"> type = "text/javaScript> </script> <script src ="lib/jquery-2.1.4.min.js "> </script> <link rel ="stylesheet "href ="css/bootstrap.css "type ="text/css "/> style> .Btn-group {위치; 왼쪽 : 40px; } .list-group {위치 : 상대; 왼쪽 : 0; } .list-group-item {} #list3 {너비 : 200px; . "Ng-MouseOver ="Flag = 3 "NG-Mouseleave ="Flag = 4 "> <a href ="#"> {{name}} </a> </a> </li> </ul> </div id ="list3 "ng-show ="ng-mouseOver = "3"ng-mouseleve = "ng-mouseleave. ng-click = "fun1 ()"> <a href = "#"> action </a> </li> <li> <a href = "#"> 또 다른 행동 </a> </li> <li> <a href = "#"> 여기 다른 것 </a> </li> <li> <a href = "#"> </li> </li> </li> </li> </li> </div> </script> </div> </body> <cript> var demo = angular.module ( "demo", []); demo.controller ( "DirectiveControl", function ($ scope) {}); demo.directive ( "list", [function () {return {restrict : 'ea', templateUrl : 'list.html', scope : {value : '= ngmodel'}, link : function (scope, element, att () {scope.value = true.log ( "a")}}})) </script> </html>(1) 우선, 우리는 지침을 루트 태그로 작성해야한다는 문제를 해결해야하며 DIV로 싸여 있어야합니다.
(2) 명령어 외부에서 매개 변수를 전달할 때 ng-model을 사용하여 변수를 선언합니다.
지침에서 범위 사용 : {
가치 : 'ngmodel'
} 값을 할당합니다
요약
위는 AngularJS 구현 탭에 관한 것입니다. 이 기사가 AngularJS를 배우거나 사용하는 데 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.