//引入angular.js
<body ng-controller="ctrl">
<my-tab my-data="arr" ny-fn="fn(num)" my-index="index"></my-tab>
</body>
<scritpt>
let app=angular.module("app",[]);
app.directive("myTab",function(){
return{
restrict:"ECMA",
replace:true,
//独立作用域scope的绑定方式
scope:{
// 数据和下标都用双向绑定
myData:"=",
myIndex:"=",
//函数单项绑定
myFn:"&"
},
templateUrl:"./module.html",
//link:function(scope,ele,attr,superCtrl){
//console.log(scope);
//console.log(ele);
//console.log(attr);
//}
}
})
app.controller("ctrl",["$scope",function($scope){
$scope.arr=[
{til:"首页",content:"这是首页的内容"},
{til:"第二页",content:"这是第二页的内容"},
{til:"第三页",content:"这是第三页的内容"},
{til:"第四页",content:"这是第四页的内容"}
];
// 初始化下标 页面打开时出现的页面
$scope.index=0;
//点击事件
$scope.fn=function(index){
$scope.index=index;
};
}])
</script>
moduel.html
<div>
<ul>
<li ng-repeat="val in myData"
ng-class="{'active':$index==myIndex}"
ng-click="myFn({num:$index})">
{{val.til}}
</li>
</ul>
<div>
<p ng-show="$index==myIndex"
ng-repeat="val in myData">
{{val.content}}
</p>
</div>
</div>
