angulasJS 指令范例

HTML5代码

<html ng-app="expanderModule">
    <head>
        <Meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
    </head>
    <body ng-controller='SomeController' >
        <accordion>
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                {{expander.text}}
            </expander>
        </accordion>
    </body>
</html>

angularjs 脚本

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion',function() {
    console.log('output accordion define!');
    return {
        restrict : 'EA',//E-元素，A-属性，C-样式类
        replace : true,//是否把指令替换成结果
        //transclude为true,启用嵌入功能，即当前的指令标签内的内容(或文本，或是其它指令处理过的文本，这里是指accordion标签之内的内容)读取出来之后放入到，template中有ng-transclude标记的标签之中，如下的：<div ng-transclude>放入这里</div>
        transclude : true,//是否把指令标签的内容嵌入指定位置
        template : '<div ng-transclude></div>',controller : function() {
            console.log('output accordion controller!');
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders,function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        },link : function(scope,element,attrs,accdCtrl) {
            console.log('output accordion link!');
        }
    }
});

expModule.directive('expander',function() {
    return {
        restrict : 'EA',replace : true,transclude : true,require : '^?accordion',//^-表示，当前作用域找不到，上父级作用域找，?-表示忽略错误继续执行
        //scope: false ：默认值，指令不会新建一个作用域，使用父级作用域。
        //scope: true ：指令会创建一个新的子作用域，原型继承于父级作用域。
        //scope: { ... } ：指令会新建一个独立作用域，不会原型继承父作用域。
        scope : {
            title : '=expanderTitle' // @-表示从父级作用域继承该属性，= 表示该值从=号后面的表达式取，如当前的这个表示是指取 title取的值等于指令标签上的"expander-title"属性的值。
        },controller : function() {
            console.log('output expander controller!');
        },// 这里的ng-transclude将存放 expander 标签内的{{expander.text}}的内容。
        template : '<div>'
                   + '<div class="title" ng-click="toggle()">{{title}}</div>'
                   + '<div class="body" ng-show="showMe" ng-transclude></div>'
                   + '</div>',accdCtrl) {
            scope.showMe = false;
            accdCtrl.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accdCtrl.gotOpened(scope);
            }
            console.log('output expander link!');
        }
    }
});

expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : 'Click me to expand',text : 'Hi there folks,I am the content that was hidden but is Now shown.'
    },{
        title : 'Click this',text : 'I am even better text than you have seen prevIoUsly'
    },{
        title : 'Test',text : 'test'
    }];
});

注：
scope{
title : ‘=expanderTitle’
}
要注意，在js脚本里。需要用驼峰命名法。对应HTML标签时，把中间的大写字母前加一连字符’-‘,再把大写字母改成小写。
例：
1. expanderTitle 对应html表示为 expander-title
2. expanderSubTitle 对应html表示为 expander-sub-title

各指令的调用顺序

output accordion define!
output expander define!
output accordion controller!
output accordion link!
output expander controller!
output expander link!
output expander controller!
output expander link!
output expander controller!
output expander link!

HTML5代码

angularjs 脚本

各指令的调用顺序

相关推荐