<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1 div,#div2 div{ width:200px; height:200px; border:1px red solid; display:none;}

#div1 input.active , #div2 input.active{ background:red;}

</style>

<script src="jquery-1.11.1.js"></script>

<script src="angular.min.js"></script>

<script>

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

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

    return {

        restrict : 'E',

        replace : true,

        scope : {

            myId : '@',

            myData : '='

        },

        controller : ['$scope',function($scope){

            $scope.name = 'miaov';

        }],

        templateUrl : 'temp3.html',

        link : function(scope,element,attr){

            //console.log(scope.name);

            //console.log(element);

            //console.log(attr.myId);

            element.delegate('input','click',function(){

                $(this).attr('class','active').siblings('input').attr('class','');

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

            });

        }

    };

});

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

    $scope.data1 = [

        {title:'数学',content:'111111111'},

        {title:'语文',content:'222222222'},

        {title:'英语',content:'333333333'}

    ];

    $scope.data2 = [

        {title:'物理',content:'444444444'},

        {title:'化学',content:'555555555'}

    ];

}]);

</script>

</head>

<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>

</html>

temp3.html

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

    <!--<input class="active" type="button" value="1">

    <input type="button" value="2">

    <input type="button" value="3">

    <div style="display:block">11111111</div>

    <div>22222222</div>

    <div>33333333</div>-->

    <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>

Angular 学习笔记——自定义指令的更多相关文章

  1. Angular 学习笔记——自定义指令之间的交互

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  2. Angular 学习笔记——自定义标签

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  3. Angular 学习笔记——标签指令

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  5. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  6. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  7. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  8. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

随机推荐

  1. 洛谷noip 模拟赛 day1 T3

    T7983 大芳的逆行板载 题目背景 大芳有一个不太好的习惯:在车里养青蛙.青蛙在一个n厘米(11n毫米s)的Van♂杆子上跳来跳去.她时常盯着青蛙看,以至于突然逆行不得不开始躲交叉弹.有一天他突发奇 ...

  2. OI 知识体系

    OI Training 知识体系结构 初级 1.1 C语言基础 1.1.1 C语言程序结构(A+B Problem) 1.1.2 变量,常量,数据类型,输入与输出 1.1.3 条件语句 1.1.4 循 ...

  3. 算法详解（LCA&RMQ&tarjan）补坑啦！完结撒花(｡◕ˇ∀ˇ◕)

    首先,众所周知,求LCA共有3种算法(树剖就不说了,太高级,以后再学..). 1.树上倍增(ST表优化) 2.RMQ&时间戳(ST表优化) 3.tarjan(离线算法)不讲..(后面补坑啦!) ...

  4. Python学习杂记_11_函数（二）

    函数的高级运用这部分知识的核心内容就是你要把“函数即变量”这个概念理解并运用得出神入化... 一.函数的递归调用 所谓递归调用就是函数自己调用自己,在Python中如果不做限制递归调用的死循环最多可循 ...

  5. 【转载】使用 PIVOT 和 UNPIVOT

    可以使用 PIVOT 和 UNPIVOT 关系运算符将表值表达式更改为另一个表.PIVOT 通过将表达式某一列中的唯一值转换为输出中的多个列来旋转表值表达式,并在必要时对最终输出中所需的任何其余列值执 ...

  6. 【原创】SQL SERVER 2008 R2安装(多图详解)

    配置系统环境说明 操作系统:Windows 7 操作系统版本:旗舰版 SP1 操作系统位数:x64 注:其它系统配置也基本相似,只是可能菜单的名字或者所处位置不一样,具体的配置如有不同,请自行搜索 安 ...

  7. CF986A Fair【图论/BFS】

    [题意]: 有些公司将在Byteland举办公平的会议.Byteland的n个城镇,m条两镇之间的双向道路.当然,你可以使用道路从任一个城镇到达任何城镇. 有k种商品产自Byteland,并且每个城镇 ...

  8. Buffer源码深入分析

    博客园对MarkDown显示的层次感不是很好,大家可以看这里:Buffeer. 本机环境: Linux 4.4.0-21-generic #37-Ubuntu SMP Mon Apr 18 18:33 ...

  9. （寒假集训）Watering the Fields （最小生成树）

    Watering the Fields 时间限制: 1 Sec  内存限制: 64 MB提交: 26  解决: 10[提交][状态][讨论版] 题目描述 Due to a lack of rain, ...

  10. （转）Unity3d使用心得（1）：ModelImporter的使用、在代码中添加动画片段。

    在使用 Unity3d 倒入Fbx模型的时候,动画的动画片段需要自己手动添加模型多了以后会是一个不小的工作量. Unity3d支持 编辑器脚本来控制资源导入的过程.添加一个 AssetPostproc ...