HTML:

<body ng-controller="Aaa">

    <my-tab my-id="div1" my-data="data1"></my-tab>

    <my-tab my-id="div2" my-data="data2"></my-tab>

</body>

js:

var m1=angular.module('myApp',[]);

        m1.directive('myTab',function(){

            return {

                restrict:"E",

                replace:true,

                templateUrl:"temp.html",

                scope:{

                    myId:'@',

                    myData:'='

                },

                link:function(scope,ele,attr){

                    $(ele).delegate('input','click',function(){

                        $(this).toggleClass('active').siblings().removeClass('active');

                        $(this).siblings('div').eq($(this).index()).css('display','block').siblings('div').css('display','none');

                    });

                }

            };

        });

        m1.controller('Aaa',['$scope',function($scope){

            $scope.data1=[

                {title:'111',content:"111111"},

                {title:'222',content:"222222"},

                {title:'333',content:"333333"}

            ];

            $scope.data2=[

                {title:'444',content:"444444"},

                {title:'555',content:"555555"}

            ];

        }]);

temp.html:

<div id="{{myId}}">

    <input ng-repeat="data in myData" type="button" ng-value="{{data.title}}" ng-class="{active:$first}">

    <div ng-repeat="data in myData" ng-style="{display:$first?'block':'none'}">{{data.content}}</div>

</div>

AngularJs 指令实现选项卡的更多相关文章

  1. AngularJS指令

    1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...

  2. angularjs指令参数transclude

    angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...

  3. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  4. AngularJS 指令

    AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指 ...

  5. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  6. angularJs指令执行的机制==大概的三个阶段

    第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...

  7. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  8. AngularJs指令（一）

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  9. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

随机推荐

  1. .NET基础 （14）管理文件和文件夹的类型

    管理文件和文件夹的类型1 如何操作文件和文件夹2 如何实现文件和文件夹的监控功能 管理文件和文件夹的类型1 如何操作文件和文件夹 .NET内建类中提供了FileInfo和DictionaryInfo两 ...

  2. Poj2231 Moo Volume 2017-03-11 22:58 30人阅读 评论(0) 收藏

    Moo Volume Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 22104   Accepted: 6692 Descr ...

  3. MSF漏洞攻击练习系统 – Metasploitable2

    Metasploitable2 是Metasploit团队维护的一个集成了各种漏洞弱点的Linux主机(ubuntu)镜像,方便广大黑扩跟安全人员进行MSF漏洞测试跟学习,免去搭建各种测试环境.VMw ...

  4. MS EXCEL2013添加Oracle Web ADI菜单

  5. ------------------java collection 集合学习 ----小白学习笔记，，有错，请指出谢谢

    <!doctype html>java对象集合学习记录 figure:first-child { margin-top: -20px; } #write ol, #write ul { p ...

  6. TL-WN725N v2.0 树莓派驱动

    TL-WN725N 1.0版Pi是可以直接识别的,但是后来TL-WN725N又出了个2.0版的,要用第三方驱动. 安装步骤如下: wget https://dl.dropboxusercontent. ...

  7. WebApi 插件式构建方案：重写的控制器获取工厂

    body { border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; } body .markdown-body ...

  8. Solr相似度名词：VSM(Vector Space Model)向量空间模型

    最近想学习下Lucene ,以前运行的Demo就感觉很神奇,什么原理呢,尤其是查找相似度最高的.最优的结果.索性就直接跳到这个问题看,很多资料都提到了VSM(Vector Space Model)即向 ...

  9. Solr相似度算法三：DRFSimilarity框架介绍

    地址:http://terrier.org/docs/v3.5/dfr_description.html The Divergence from Randomness (DFR) paradigm i ...

  10. MvvmLight框架使用入门（二）

    上一篇我们简单对MvvmLight做了介绍.罗列了三个DLL中,各个命名空间下主要类的定义及大致作用.因为只是范范的概论,对于从未接触过MvvmLight的萌新来说,根本就是在晃点他们.不过万事开头难 ...