做一个下拉菜单，体会指令各参数的作用
html代码
<script type="text/ng-template" id="mydropdown.html"> <div class="box"> <div class="dropTitle" ng-click="droptoggle()">{{dropTitle}}</div> <div class="dropBody" ng-transclude ng-show="myshow"></div> </div> </script> <div ng-controller="dropCtrl"> <ex droptitle="scopeTitle">{{dorpbody}}</ex> </div>
controller
app.controller("dropCtrl",["$scope",function($scope){
$scope.dorpbody="my dropdown body";
$scope.scopeTitle="my title"
}]);
app.directive("ex",function(){
return{
restrict:"AE",
replace:true,
transclude:true,
templateUrl:"mydropdown.html",
scope:{
dropTitle:"=droptitle"//使用父作用域中的一个属性，绑定数据到指令的属性中
},
link:function(scope,ele,attr){
scope.myshow=false;
scope.droptoggle=function(){
scope.myshow=!scope.myshow;
}
}
}
})
首先是关于templateUrl参数，该参数可以获取指定模板，有时候为了节省http请求，可以使用<script type="text/ng-template" >这种方式，同样可以通过id取到指定模板。replace:true。将指定模板替换到自定义指令内，为了使得标题可改，就要借助于数据绑定。因为我们自定义的指令是有个独立scope的，所以本来可以绑定到link函数里去的，为了指令的复用，应该把可变的标题绑定到控制器中。所以要多做一步，首先在自定义指令新建一个属性droptitle，将该属性与模板中的指令进行绑定，方式就是通过“=”的绑定策略。
绑定策略有三种“@”：传递一个字符串作为属性的值；“=”：使用父作用域中的一个属性，绑定数据到指令的属性中；“&”：使用父作用域中的一个函数,可以在指令中调用。现在模板中的{{dropTitle}}就与属性droptitle绑定了。第二步就是将属性与控制器内的值关联。现在只要在控制器中修改值就可以改变指令标题了。
显示/隐藏功能就是通过ngShow实现，需要注意的是应该讲这个逻辑放在指令的link函数内，而不要放在控制器里。
内容很简单，对于初学还是有借鉴意义的。