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函数内，而不要放在控制器里。

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

巴特西

angularJs driective指令小实例

最新文章

热门文章