angular js点击tab中的li标签加载相应div区域div引用外部css怎么写写啊

来源：蜘蛛抓取(WebSpider) 时间：2015-10-22 00:45 标签： 加载动画html怎么写
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)AngularJS实现标签页的两种方式_AngularJS
作者：用户
本文讲的是AngularJS实现标签页的两种方式_AngularJS，
一、通过普通指令实现标签页
&link rel=&stylesheet& href=&views/show/tab.css&/&
&ul class=&nav nav-tabs& ng-in
一、通过普通指令实现标签页
&link rel="stylesheet" href="views/show/tab."/&
&ul class="nav nav-tabs" ng-init="vm.activeTab=1"&
&li ng-class="{active: vm.activeTab == 1}"&&a href="javascript:;" ng-click="vm.activeTab = 1"&标签1&/a&&/li&
&li ng-class="{active: vm.activeTab == 2}"&&a href="javascript:;" ng-click="vm.activeTab = 2"&标签2&/a&&/li&
&div class="tab-content tab-bordered"&
&div class="tab-panel" ng-show="vm.activeTab == 1"&
标签1的内容
&div class="tab-panel" ng-show="vm.activeTab == 2"&
标签2的内容
&h3&说明&/h3&
这里演示的是直接通过bootstrap实现的方法。
&hr/&还可以通过angular-bootstrap的tabset指令实现，参见 &a href="http://angular-ui.hub.io/bootstrap/#/tabs" target="_blank"&官方Demo&/a&
'use strict';
angular.module('ngShowcaseApp').controller('ctrl.show.tab', function ($scope) {
var vm = $scope.vm = {};
.tab-content.tab-bordered {
border-top:
padding: 15
border-radius: 0 0 4px 4
二、自定义指令实现的标签页
&!DOCTYPE html&
&html lang="en" ng-app="demo"&
&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.4.min.js"&&/script&
&script src="lib/bootstrap.js" type="text/javascript"&&/script&
&link rel="stylesheet" href="css/bootstrap.css" type="text/css"/&
.btn-group{
.list-group{
.list-group-item{
width: 200
&div ng-controller="directiveControl"&
&div style="width: 100height: 100border: 1px solid blue" ng-class="{'hidden':value}" &&/div&
&list ng-model="value" &&/list&
&script type="text/ng-template" id="list.html"&
&div class="btn-group"&
&ul class="nav nav-tabs"&
&li role="presentation" ng-mouseover="flag=3" ng-mouseleave="flag=4"&&a href="#" &{{name}}&/a&&/li&
&div class="list-group" id="list3" ng-show="flag==3" ng-mouseover="flag=3" ng-mouseleave="flag=4"&
&li class="list-group-item " ng-click="fun1()"&&a href="#"&Action&/a&&/li&
&li class="list-group-item "&&a href="#"&Another action&/a&&/li&
&li class="list-group-item "&&a href="#"&Something else here&/a&&/li&
&li class="list-group-item "&&a href="#"&Separated link&/a&&/li&
var demo=angular.module("demo",[]);
demo.controller("directiveControl", function ($scope) {
demo.directive("list",[function () {
restrict:'EA',
templateUrl:'list.html',
value:'=ngModel'
link: function (scope,element,attr) {
scope.name="home";
scope.lists=[{name:'home'},{name:'family '}];
scope.fun1= function () {
scope.value=
console.log("a")
（1）首先要解决指令必须写在一个根标签中，一定要用div包裹
（2）指令外部传递参数要使用ng-model，来声明变量，
在指令中用scope：{
value:'ngModel'
以上就是关于AngularJS实现标签页的全部内容，希望这篇对大家学习或使用AngularJs能有所帮助，如果有疑问大家可以留言交流。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索angularjs
自定义标签
实现多标签
angularjs标签
angularjs实现tab切换、angularjs实现分页、angularjs a标签跳转、angularjs 自定义标签、angularjs实现轮播图，以便于您获取更多的相关知识。
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！用AngularJS在DIV中动态加载页面 | Systems Thoughts

我要回帖

更多关于 加载动画html怎么写 的文章

 

随机推荐