angularJs driective指令小实例

做一个下拉菜单，体会指令各参数的作用

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="mydropdown.html">这种方式，同样可以通过id取到指定模板。replace:true。将指定模板替换到自定义指令内，为了使得标题可改，就要借助于数据绑定。因为我们自定义的指令是有个独立scope的，所以本来可以绑定到link函数里去的，为了指令的复用，应该把可变的标题绑定到控制器中。所以要多做一步，首先在自定义指令新建一个属性droptitle，将该属性与模板中的指令进行绑定，方式就是通过“=”的绑定策略。

绑定策略有三种“@”：传递一个字符串作为属性的值；“=”：使用父作用域中的一个属性，绑定数据到指令的属性中；“&”：使用父作用域中的一个函数,可以在指令中调用。现在模板中的{{dropTitle}}就与属性droptitle绑定了。第二步就是将属性与控制器内的值关联。现在只要在控制器中修改值就可以改变指令标题了。

显示/隐藏功能就是通过ngShow实现，需要注意的是应该讲这个逻辑放在指令的link函数内，而不要放在控制器里。

内容很简单，对于初学还是有借鉴意义的。