angulasJS 指令范例

来源：互联网发布：美国钻井平台数据公布编辑：程序博客网时间：2024/06/05 23:47

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'        },        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>',        link : function(scope, element, attrs, 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

scope: { … }

指令会新建一个封闭的作用域。该作用域不会进行原型继承。这样的配置通常是你创建可复用组件的最好选择，因为这指令不会意外地读取或修改父级作用域。然而，有些指令通常需要访问父作用域的数据。设置对象是用来配置父作用域和封闭作用域之间的双向绑定（使用=）或单向绑定（使用@）。这里也可以使用&绑定父作用域上的表达式。所以，这些配置都会将来自父作用域的数据创建到本地作用域属性中。

要注意的是，这些配置选项只是用来设置绑定方式 – 你只能运用Dom元素的属性引入父作用域的属性们，而不可以在配置选项中直接引用。比如你想将父作用域的属性parentProp绑定到封闭的作用域：

和scope: { localProp: ‘@parentProp’}，这不会起作用。我们必须用DOM元素属性定义指令需要绑定的每一个父作用域属性：

和scope: { localProp: ‘@theParentProp’ }。

封闭作用域的proto引用的是一个Scope对象。封闭作用域的$parent指向父作用域，所以，虽然该作用域保持封闭而且不会原型继承于父作用域，但它依旧是一个子作用域。

各指令的调用顺序

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!

0 0