自定义指令写选项卡

样式部分

*{margin:0;padding:0;list-style:none;}

ul{display:flex;}

ul li{flex-grow:1;text-align:center;line-height:50px;box-sizing:border-box;border:1px solid deepskyblue;}

ul li.bgColor{background:palegoldenrod;color:#fff;}

p{height:300px;border:1px solid deepskyblue;box-sizing:border-box;}

html部分

    

script部分

var app =angular.module("myApp",[]);

app.directive("myHello",function(){

      return {

        restrict :"ECMA",

             //指令在模板中的使用方式（匹配模式）

        replace:true,

        scope:{

             // myId:"@",

             //只能读到父作用域里的值单项绑定

             //把当前属性作为字符串传递，还可绑定来自外层scope的值，在属性值中插入{{}}即可

          myData:"=",

                //作用域中的属性与父作用域scope中的属性进行双向数据绑定，任何一方的修改都会影响到对方

          myIndex:"=",

          myFn:"&"

               //传递一个来自父scope的函数，稍后调用

               //作用域把父作用域的属性进行双向数据绑定，从而以函数的方式读写父作用域的属性

         },

           templateUrl:"./xxk.html",

           link:function(scope,ele,attr){

                 console.log(scope);//数据

                 console.log(ele);//元素

                 console.log(attr);//属性

           }

     }

});

app.controller("myCtrl",["$scope",function($scope){

        $scope.arr = [

           {til:"首页",content:"这是首页的内容"},

           {til:"第一页",content:"这是第一页的内容"},

           {til:"第二页",content:"这是第二页的内容"},

           {til:"第三页",content:"这是第三页的内容"}

         ];

       $scope.index =0;

       $scope.fn=function(index){

                $scope.index =index;

       };

}])