之前讲到directive自定义指令,但是实际上单纯创建指令是没什么卵用的。减少开发成本,需要使用控制器与自己制作的指令交互。
<div ng-app=“App” ng-controller=“Ctrl ”>
<—自定义一个指令—>
<test testdata=“{{data}}”></test>
</div>
<script>
var app=angular.module(“App”,[]);
app.controller(“Ctrl”function(){
$scope.data=“测试数据”;
});
app.directive(“test”,function(){
return{
restrict:”AE”,
template:”<div>{{dirdata}}</div>”,
link:function(scope,element,attrs){
scope.dirdata=attrs.testdata
}
}
});
</script>
结果输出:测试数据
说明:我看了一个晚上才发现。原来directive的数据表达方式与controller所赋值的数据的表达根本都不同。很有趣,自定义两个指令之后(一个A一个E),$sope居然可以直接访问自定义的标签和属性。
这里的原理是这样的,
1.定义test指令,以属性的方式创建数据容器。
2.通过controller来给原来的容器存放数据
3.实例化test和data指令,创建一个模版,用于以普通html元素渲染数据。
4.因为无法直接用test标签渲染数据。所以,初始化好了的数据都需要放到模版中渲染。所以接下来就需要将指令中的数据赋值到模版中(使用directive配置项的“link”函数)
注:link函数:这个函数用于定义指令的行为,(仅限于指令内部)