1. Implemente la página de etiqueta a través de instrucciones ordinarias
<link rel = "stylesheet" href = "vistas/show/tab.css"/> <div> <ul ng-init = "vm.activetab = 1"> <li ng-class = "{activo: vm.activeTab == 1}"> <a href = "javaScript:;" ng-chick = "vm.activeTab = 1"> tag1 </a> </li> <li ng-class = "{activo: vm.activeTab == 2}"> <a href = "javascript :;" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng ng-show = "vm.activeTab = 2}"> <a href = "javascript :;" ng-click = "vm.activetab = 2"> tag2 </a> </li> </ul> <div> <div ng ng-show = "vm.activeTab = 2}"> <a href = "javascript :;" ng-click = "vm.activeTab = 2"> tag2 </a> </li> </ul> <div> <div ng ng-show = "vm.activeTab == 1"> Contenido de la etiqueta 1 </div> <div ng-show = "vm.activeTab == 2"> Contenido de la etiqueta 2 </tiv> </div> </div> <h3> Descripción </h3> aquí es un método que es un método que es un método que es un metod bootstrap. <hr/> también se puede implementar a través de la directiva TabSet de Angular-Bootstrap, ver <a href = "http://angular-ui.github.io/bootstrap/#/tabs" target = "_ en blanco"> Demo oficial </a> 'Use uso Strict '; Angular.module (' ngshowcasepp '). Controller (' ctrl.show.tab ', function ($ scope) {var vm = $ scope.vm = {};});. Border-Top: Ninguno; relleno: 15px; Border-Radius: 0 0 4PX 4PX;}2. Página de etiqueta de implementación de comandos personalizados
<! Doctype html> <html lang = "en" ng-app = "damo"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javaScript"> </script> <script src = "lib/angular-route.js" type = "text/javaScript"> </script> <script src = "lib/jQuery-2.1.44.min.js"> </script> <link rel = "stylesheet" href = "css/bootstrap.css" type = "text/css"/> <syle> .btn-group {posición: relativo; Izquierda: 40px; } .list-group {posición: relativo; Izquierda: 0; } .List-Group-Item {} #list3 {width: 200px; } </style></head><body > <div ng-controller="directiveControl"> <div ng-class="{'hidden':value}" ></div> <div> <list ng-model="value" ></list> </div> <script type="text/ng-template" id="list.html"> <div > <ul> <li role = "Presentation" ng-mouseover = "flag = 3" ng-mouseave = "flag = 4"> <a href = "#"> {{name}} </a> </li> </ul> </div> <div id = "list3" ng-show = "flag == 3" ng-mouseover = "= 3" ng-museleveveveeveveveveveveveveveveveveveveveveveveve. ng-click="fun1()"><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div> </script> </div> </script> </div> </body> <script> 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, attr) {scope.name = "home"; scope.lists = [{name: 'home'}, {name: 'n. function () {scope.value = true;(1) En primer lugar, debemos resolver el problema de que las instrucciones deben escribirse en una etiqueta de raíz, y deben estar envueltas en un DIV
(2) Use el modelo NG para declarar variables al pasar parámetros fuera de la instrucción.
Use el alcance en la directiva: {
Valor: 'ngmodel'
} para asignar valor
Resumir
Lo anterior se trata de la pestaña de implementación de AngularJS. Espero que este artículo sea útil para que todos aprendan o usen AngularJs. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.