样式部分
*{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:"@",
? ? ? ? ? ? ?//只能读到父作用域里的值单项绑定
? ? ? ? ? ? ?//把当前属性作为字符串传递，还可绑定来自外层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;
? ? ? ?};
}])
