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. Linux 基础教程 40-df和du命令

    df     df用于显示文件系统的整体磁盘使用量. 基本用法 df [选项] [目录/文件] 其常用选项如下所示: 选项 说明 -a, --all 显示所有文件系统,包括/proc等虚拟文件系统 - ...

  2. Appium常用API（二）

    接前面的常用API(一),本文接着介绍如下: 1.press_keycode press_keycode(self, keycode, metastate=None): Sends a keycode ...

  3. java.util.concurrent.locks.LockSupport (讲得比较细)

    转自:   https://my.oschina.net/readjava/blog/282882   摘要: 要学习JAVA中是如何实现线程间的锁,就得从LockSupport这个类先说起,因为这个 ...

  4. 解决idea gradle构建Received fatal alert: handshake_failure问题

    Gradle是一款强大的构建工具,但是搭建项目运行环境总是非常头痛,各种网络原因会导致项目不能成功的导入. 说一下这个问题的解决办法,折腾了很久终于解决了. javax.net.ssl.SSLHand ...

  5. 1、Docker介绍

      Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器完全使用沙箱机制,相互之间不会有任何接口 ...

  6. Buffer Pool--SQL Server:Memory Manager 对象

    --=================================================================SELECT * FROM sys.sysperfinfoWHER ...

  7. 命令式语言和声明式语言对比——JavaScript实现快速排序为例

    什么是命令式编程 (Imperative Programming)? 命令机器如何做事情,强调细节实现 java.c.c++等都属此类. “这些语言的特征在于,写出的代码除了表现出“什么(What)” ...

  8. OpenSSH服务及其相关应用

    远程登录工具: telnet,TCP/23:认证明文,数据传输明文,不够安全,所以出现了ssh ssh:Secure SHell,TCP/22,刚开始免费,后来商业化了,所以出现了Openssh,这个 ...

  9. 微信小程序web-view之wx.miniProgram.redirectTo

    17年微信小程序官方提供了web-view组件. 官方描述:web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 这段时间研究了一下小程 ...

  10. C#设计模式(23种模式)

    https://www.cnblogs.com/abcdwxc/archive/2007/10/30/942834.html