<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
//m1是一个模块对象，下面有run,directive,controller，filter等
var m1 = angular.module('myApp',[]);
m1.directive('myHello',function(){//directive自定义指令，myHello是自定义指令的名字，函数是回调，
    return {
        restrict : 'AECM',   //指令的类型：E表示标签指令即可以写<my-hello></my-hello>，A表示属性指令即写成<p my-hello></p>，C表示class形式写成<p class="hello"></p>,M表示注释指令写成<!-- directive:hello -->。区分大小写，而且是可以组合使用的。
        replace : true,       //替换<my-hello></my-hello>,<p my-hello></p>,<p class="hello"></p>,<!-- directive:hello -->
        template : '<div>hello angular</div>'
    };
});

</script>
</head>

<body>
<my-hello></my-hello>
<p my-hello></p>
<p class="hello"></p>   // 容易与样式class搞混
<!-- directive:hello -->  //容易与注释搞混


</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
#div1 input.active{ background:red;}
</style>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
    return {
        restrict : 'E',   
        replace : true,
        /*template : '<div id="div1">\
                    <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>\
                </div>'*/
        templateUrl : 'temp2.html'
    };
});

</script>
</head>

<body>
<my-tab></my-tab>
<!--<div id="div1">
    <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>
</div>-->
</body>
</html>





temp2.html:
<div id="{{myId}}">
    <input class="active" type="button" value="1" ng-click="myFn({num:456})">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">{{name}}</div>
    <div>22222222</div>
    <div>33333333</div>
</div>
<!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="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
    return {
        restrict : 'E',   
        replace : true,
        //scope : true,  //true表示不同的my-tab标签作用域独立。
        scope : {  //隔离作用域，
            myId : '@',
            myName : '=',
            myFn : '&'
        },
        controller : ['$scope',function($scope){
            $scope.name = 'miaov';
        }],
        templateUrl : 'temp2.html'
    };
});

m1.controller('Aaa',['$scope',function($scope){
    
    $scope.name = 'hello';
    $scope.show = function(n){
        alert(n);
    };
    
}]);


</script>
</head>

<body ng-controller="Aaa">
<my-tab my-id="div1" my-name="name" my-fn="show(num)"></my-tab>
<my-tab my-id="div2" my-name="name" my-fn="show(num)"></my-tab>
</body>
</html>
<!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){  //自定义指令的dom操作
            //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>