How to use directives to implement two tabs in angular-JS Tutorial-php.cn

Today, let’s learn how to use instructions to implement two tabs in angular.

First of all, you must introduce the jQuery file and angularjs file.

Title /*定义选中按钮样式*/ .on { background: red; } /*对内容进行布局*/ p { border: #000 1px solid; width: 200px; display: none; height: 200px; } 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" } })

tab.html部分 {{data.content}}

这样小小的两个选项卡效果就完成了，你们学会了吗？你们也可以使用自定义指令的方式写拖拽。