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. Codeforces761A Dasha and Stairs 2017-02-05 23:28 114人阅读 评论(0) 收藏

    A. Dasha and Stairs time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. Oracle Inventory Management Application Program Interface ( APIs) (Doc ID 729998.1)

    In this Document Goal Solution References APPLIES TO: Oracle Inventory Management - Version 12.0.0 a ...

  3. python signal

    在了解了Linux的信号基础之 后,Python标准库中的signal包就很容易学习和理解.signal包负责在Python程序内部处理信号,典型的操作包括预设信号处理函数,暂 停并等待信号,以及定时 ...

  4. linux清理磁盘

    https://blog.csdn.net/u012660464/article/details/78923011 有时候,服务突然挂了,再次启动却启动不了.一看,原来是磁盘空间被占满啦,那么,怎么清 ...

  5. Jenkins+.Net Core+Git集成发布 - SkyMallCore快速开发平台

    准备工作:安装 Jenkins+java 直接百度安装,在此忽略 dotnet sdk(iis部署已经安装) 一:windows 部署到IIS 首先搭建IIS,站点应用程序池选择 ‘无托管代码’ 安装 ...

  6. 虚拟化 - Hyper-V

    不能和VMware.VirtualBox同时使用 网络 交换机其实就是指网卡,只不过是虚拟的 内部交换机 外部交换机

  7. Android App的破解技术有哪些？如何防止反编译？

     现在最流行的App破解技术大多是基于一定相关技术的基础:如一定阅读Java代码的能力.有一些Android基础.会使用eclipse的一些Android调试的相关工具以及了解一些smali的语法规范 ...

  8. iOS AppStore 被拒原因

    De : Apple 3.12 - Apps should have all included URLs fully functional when you submit it for review, ...

  9. Android Performance 性能提升

    1. 经常变动的字符串要用 StringBuilder,然后每次变动用 append 方法.而不应该每次创建新的 String. 2. 使用 static final 变量. 3. It's reas ...

  10. kolla-ansible安装openstack(Ocata)

    基本功能部署 基础环境 角色 操作系统 硬件配置 Depoly CentOS 7 Server 磁盘:40GB 内存:8GB 网卡:ens3(内网) ens4(外网) Sched CentOS 7 S ...