首先，要先引入jquery文件与angularjs文件。
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/*定义选中按钮样式*/
.on {
background: red;
}
/*对内容进行布局*/
p {
border: #000 1px solid;
width: 200px;
display: none;
height: 200px;
}
</style>
<script src="jquery-3.1.1.js?1.1.11"></script>
<script src="angular.min.js?1.1.11"></script>
<script>
var app=angular.module(app,[]);//定义angular模块
app.controller(ctrl,function ($scope) {
$scope.list=[
{name:新闻,content:新闻},
{name:体育,content:体育},
{name:娱乐,content:娱乐}
];
$scope.list2=[
{name:新闻2,content:新闻2},
{name:体育2,content:体育2},
{name:娱乐2,content:娱乐2},
{name:农业,content:农业}
]
});
app.directive(mytab,function () { //定义名字时要使用驼峰式命名法
return{
link:function (scope,element,attr) {//使用jquery来实现效果
element.delegate(input,click,function () {
$(this).attr(class,on).siblings(input).attr(class,);
$(this).siblings(p).eq($(this).index()).show().siblings(p).hide();
})
},
restrict:ecma,
replace:true,
// scope:true,//解决冲突问题
scope:{
myid:@, //绑定字符串
mydata:= //绑定变量
}
templateurl:tab.html
}
})
</script>
</head>
<body ng-controller="ctrl">
<my-tab my-id="div1" my-data="list"></my-tab>
<my-tab my-id="div2" my-data="list2"></my-tab>
</body>
</html>
tab.html部分
<div id="{{myid}}">
<input ng-repeat="data in mydata" type="button" value="{{data.title}}" ng-class="{on:$first}">
<p ng-repeat="data in mydata" ng-style="{display: $first ? 'block' : 'none'}">{{data.content}}</p>
</div>
这样小小的两个选项卡效果就完成了，你们学会了吗？你们也可以使用自定义指令的方式写拖拽。
以上就是angular中怎么使用指令来实现两个选项卡的问题的详细内容。