樣式部分
*{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部分
<body ng-controller="myCtrl">
????<my-hello my-data="arr" my-index="index" my-fn="fn(num)"></my-hello>
</body>
script部分
var app =angular.module("myApp",[]);
app.directive("myHello",function(){
? ? ? return {
? ? ? ? restrict :"ECMA",
? ? ? ? ? ? ?//指令在模板中的使用方式（匹配模式）
? ? ? ? replace:true,
? ? ? ? scope:{
? ? ? ? ? ? ?// myId:"@",
? ? ? ? ? ? ?//只能讀到父作用域里的值單項(xiàng)綁定
? ? ? ? ? ? ?//把當(dāng)前屬性作為字符串傳遞缩焦，還可綁定來自外層scope的值购啄，在屬性值中插入{{}}即可
? ? ? ? ? myData:"=",
? ? ? ? ? ? ????//作用域中的屬性與父作用域scope中的屬性進(jìn)行雙向數(shù)據(jù)綁定庶骄，任何一方的修改都會影響到對方
? ? ? ? ? myIndex:"=",
? ? ? ? ? myFn:"&"
? ? ? ? ? ?????//傳遞一個來自父scope的函數(shù)峡钓，稍后調(diào)用
? ? ? ? ? ?????//作用域把父作用域的屬性進(jìn)行雙向數(shù)據(jù)綁定粹断，從而以函數(shù)的方式讀寫父作用域的屬性
? ? ? ? ?},
? ? ? ? ? ?templateUrl:"./xxk.html",
? ? ? ? ? ?link:function(scope,ele,attr){
? ? ? ? ? ? ? ? ?console.log(scope);//數(shù)據(jù)
? ? ? ? ? ? ? ? ?console.log(ele);//元素
? ? ? ? ? ? ? ? ?console.log(attr);//屬性
? ? ? ? ? ?}
? ? ?}
});
app.controller("myCtrl",["$scope",function($scope){
? ? ? ? $scope.arr = [
? ? ? ? ? ?{til:"首頁",content:"這是首頁的內(nèi)容"},
? ? ? ? ? ?{til:"第一頁",content:"這是第一頁的內(nèi)容"},
? ? ? ? ? ?{til:"第二頁",content:"這是第二頁的內(nèi)容"},
? ? ? ? ? ?{til:"第三頁",content:"這是第三頁的內(nèi)容"}
? ? ? ? ?];
? ? ? ?$scope.index =0;
? ? ? ?$scope.fn=function(index){
? ? ? ? ? ? ? ? $scope.index =index;
? ? ? ?};
}])
