封装选项卡 2018-03-23

//引入angular.js

---

    

---

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

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

                    return{

                                   restrict:"ECMA",

                                   replace:true,

                                  //独立作用域scope的绑定方式

                                    scope:{

                                                    // 数据和下标都用双向绑定

                                                   myData:"=",

                                                   myIndex:"=",

                                                  //函数单项绑定

                                                   myFn:"&"

                                    },

                                   templateUrl:"./module.html",

                                   //link:function(scope,ele,attr,superCtrl){

                                                              //console.log(scope);

                                                             //console.log(ele);

                                                           //console.log(attr);

                                   //}

               }

         })

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

                    $scope.arr=[

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

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

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

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

                    ];

                   //    初始化下标 页面打开时出现的页面

                      $scope.index=0;

                 //点击事件

                     $scope.fn=function(index){

                                       $scope.index=index;

                    };

        }])

---

moduel.html

        

            

•                   ng-class="{'active':$index==myIndex}"

                     ng-click="myFn({num:$index})">

                      {{val.til}}

               

        

        

                

                       ng-repeat="val in myData">

                       {{val.content}}