样式部分
*{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;
};
}])
网友评论