《AngularJS》5个实例详解Directive（指令）机制

最新推荐文章于 2024-02-28 08:16:37 发布
最新推荐文章于 2024-02-28 08:16:37 发布
阅读量251 收藏
点赞数
分类专栏： AngulaJS

《AngularJS》5个实例详解Directive（指令）机制

转自   大漠穷秋

 http://damoqiongqiu.iteye.com/blog/1917971 


 本文整理并扩展了《AngularJS》这本书第六章里面的内容，此书近期即将由电子工业出版社出版，敬请期待口令：Angular

 

1.一点小说明

 

指令的作用：实现语义化标签

 

我们常用的HTML标签是这样的：

 

<div>
    <span>一点点内容</span>
</div>

 

而使用AngularJS的directive（指令）机制，我们可以实现这样的东西：

 

<tabpanel>
    <panel>子面板1</panel>
    <panel>子面板2</panel>
</tabpanel>

 

很多人可能要惊呼，这货和JSP或者Struts等等框架里面的taglib很像啊！

 

呃，说实话，实际上就是这样的，只不过这里是使用JavaScript来实现的。正因为如此，所以很多taglib做不到的功能，使用它就都可以做到，比如访问N层scope里面的对象之类的事情（参见后面第5个例子）。

 

2.实例1：从最简单的开始

 

<html ng-app='app'>
    <body>
        <hello></hello>
    </body>

    <script src="../angular-1.0.3/angular.min.js"></script>
    <script src="HelloDirect.js"></script>
</html>

 

对于以上代码里面的<hello>标签，浏览器显然是不认识的，它唯一能做的事情就是无视这个标签。那么，为了让浏览器能够认识这个标签，我们需要使用Angular来定义一个hello指令（本质上说就是自己来把<hello>这种玩意儿替换成浏览器能识别的那些标准HTML标签）。

 

来看这段温馨的JS代码：

 

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<div>Hi there</div>',
        replace: true
    };
});

 

以上代码大概看两眼就可以了，不要太在意细节。

 

然后我们就可以在浏览器里面看到这样的内容：

 



 

 

实际产生的标签结构是这样的：

 



 

 

可以看到，<hello>这个东东已经被<div>Hi there</div>这个标签替换掉了，这也是以上JS代码里面replace:true这行配置的作用，代码里面的template配置 项当然就是我们要的div标签啦，至于restrict:'E'这个配置项的含义，请看下表：

 



 

 

ok，看完上面的表格，对于restrict这个属性相信你已经秒懂了，那么我们来玩儿点花样吧。如果我们需要替换的HTML标签很长，显然不能用 拼接字符串的方式来写，这时候我们可以用templateUrl来替代template，从而可以把模板写到一个独立的HTML文件中。

 

3.实例2：transclude（变换）

 

先看例子，JS代码：

 

var appModule = angular.module('app', []);
    appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<div>Hi there <span ng-transclude></span></div>',
        transclude: true
    };
});

 

HTML代码：

 

<html ng-app='app'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <hello>
            <br/>
            <span>原始的内容，</span><br/>
            <span>还会在这里。</span>
        </hello>
        <hello>
        </hello>
    </body>

    <script src="../angular-1.0.3/angular.min.js"></script>
    <script src="Transclude.js"></script>
</html>

 

运行效果如下：

 



 

 

生成的HTML标签结构如下：

 



 

 

和第一个例子对比，这个例子的JS和HTML代码都略有不同，JS代码里面多了一个transclude: true，HTML代码里面在<hello>内部出现了子标签。

 

按照我们在第一个例子中的说法，指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好，如果我们自定义的标签内部出现了子标签，应该如何去处理呢？很显然，transclude就是用来处理这种情况的。

 

对于当前这个例子，transclude的作用可以简化地理解成：把<hello>标签替换成我们所编写的HTML模板，但是<hello>标签内部的内容保持不变。

 

很显然，由于我们没有加replace:true选项，所以<hello>标签还在，没有被替换掉。同时，通过这个例子你还还会发现一 个暗藏的属性，那就是浏览器实际上非常智能，虽然它并不认识<hello>这个标签，但是页面没有出错，它只是默默地把这个标签忽略掉了！怎 么样？是不是碉堡了？

 

你可以自己在上面的JS代码里面加上replace:true，然后再看生成的HTML结构。

 

4.实例3：关于compile和link

 

JS代码：

 

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<span>Hi there</span>',
        replace: true
    };
});
appModule.controller('MyController',function($scope) {
    $scope.things = [1,2,3,4,5,6];
});

 

HTML代码：

 

<html ng-app='app'>
    <body ng-controller='MyController'>
        <div ng-repeat='thing in things'>
            {{thing}}.<hello></hello>
        </div>
    </body>

    <script src="../angular-1.0.3/angular.min.js"></script>
    <script src="CompileAndLink.js"></script>
</html>

 

呃，这个例子是用来解释一点点理论的，所以单纯看效果可能看不出个鸟。

 

如前所述，指令的本质其实是一个替换过程。好，既然如此，Angular到底是如何进行替换的呢？嗯嗯，这个过程分2个阶段，也就是本节标题所说的compile（编译）和link（连接）了。

 

简而言之，compile阶段进行标签解析和变换，link阶段进行数据绑定等操作。这里面更加细节的处理过程请参见《AngularJS》这本书中的解析，这里就不赘述了（呃，实际上是因为解释起来很长很麻烦，叔懒得在这儿说了

 ）。

 

那么，知道这件事情有什么用途呢？

 

比方说，你有一些事件需要绑定到某个元素上，那么你需要提供一个link函数，做法请看下一个例子。

 

5.实例4：一个复杂一点的例子Expander

 

这是《AngularJS》这本书里面提供的一个例子，但是书里面没有给出完整的可运行代码，所以这里给出来，大家参考一下。

 

JS代码：

 

var expanderModule=angular.module('expanderModule', [])
expanderModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        scope : {
            title : '=expanderTitle'
        },
        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) {
            scope.showMe = false;
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
            }
        }
    }
});
expanderModule.controller('SomeController',function($scope) {
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';
});

 

HTML代码：

 

<html ng-app='expanderModule'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="../angular-1.0.3/angular.min.js"></script>
        <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
    </head>
    <body>
        <div ng-controller='SomeController'>
            <expander class='expander' expander-title='title'>
                {{text}}
            </expander>
        </div>
    </body>
    <script src="ExpanderSimple.js"></script>
</html>

 

CSS代码：

 

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

 

运行效果如下：

 



 

 

注意一下JS代码里面的这一段：

 

link : function(scope, element, attrs) {
    scope.showMe = false;
    scope.toggle = function toggle() {
        scope.showMe = !scope.showMe;
    }
}

 

自己跑一跑例子，研究一番，不多解释。

 

6.实例5：一个综合的例子

 

JS代码：

 

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle'
        },
        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, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});

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'
    }];
});

 

HTML代码：

 

<html ng-app="expanderModule">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="../angular-1.0.3/angular.min.js"></script>
        <link rel="stylesheet" type="text/css" href="Accordion.css"/>
    </head>
    <body ng-controller='SomeController' >
        <accordion>
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                {{expander.text}}
            </expander>
        </accordion>
    </body>
    <script src="Accordion.js"></script>
</html>

 

CSS代码：

 

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

 

运行效果：

 



 

 

这个例子主要的难点在于如何在子Expander里面访问外层Accordion的scope中的数据，这一点解释起来略复杂，这里就不展开了，详细描述参见《AngularJS》一书 

 

 

AngularJS官方站点在这里：http://angularjs.org/

 

[全文完]

 

其它相关内容：

1、OReilly的《AngularJS》已由电子工业出版社出版

http://damoqiongqiu.iteye.com/blog/1965167

2、对比Angular/jQueryUI/Extjs：没有一个框架是万能的

http://damoqiongqiu.iteye.com/blog/1922004

3、AngularJS表单基础

http://damoqiongqiu.iteye.com/blog/1920191

4、AngularJS Form 进阶：远程校验和自定义输入项

http://damoqiongqiu.iteye.com/blog/1920993

5、AngularJS：在Windows上安装Yeoman

http://damoqiongqiu.iteye.com/blog/1885371

6、使用JsTestDriver实现JavaScript单元测试

http://damoqiongqiu.iteye.com/blog/1924415
Angularjs自定义指令Directive详解
10-19
在本文中，我们将详细介绍AngularJS的自定义指令的创建和使用方法，以及如何通过实例代码来实现一个特定的功能。 AngularJS自定义指令的创建通常通过定义一个模块，并在该模块中使用`.directive()`方法注册一个指令...
AngularJS 自定义指令详解及实例代码
10-21
AngularJS是一个强大的前端JavaScript框架，其核心特性之一就是自定义指令。自定义指令允许开发者扩展HTML，创建新的元素或属性，以实现特定的功能。在本文中，我们将深入探讨AngularJS自定义指令的创建、使用以及...
Angular Directive 详解
weixin_34366546的博客
05-24 389
Angular Directive 学习 学习目的：为了更好的了解 ng directive 的使用方法。 Directive可能是AngularJS中比较复杂的一个东西了。一般我们将其理解成指令。AngularJS自带了不少预设的指令，比如ng-app，ng-controller这些。可以发现个特点，AngularJS自带的指令都是由ng-打头的。 那么，Directive究竟是个怎么样的...
Angular directive 实例详解
小猪快跑
07-25 397
.directive的全部设置 angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String...
angularjs directive 实例 详解
fictiongrace的博客
12-12 715
最近在做angular1的项目，angular中可以用directive使得代码模块化，便于统一的修改维护，整个代码结构也瞬间清晰起来。 在开发的过程中模块化的代码也会有不同的属性需求。 好在在网上发现一位前辈总结的关于directive的总结，感觉写的不错，故转载之。 一，angularjs directive的常用格式，以及参数说明 1.直接return var p
AngularJS 学习笔记 -- 指令（Directive）
不断成长的我
04-17 7550
AngularJS 指令学习笔记AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的，所以要想深入理解如何定义一个指令，首相需要理解指令定义时各个参数的含义。完整的AngularJS指令参数angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范，指令的定义时应该严格遵循驼峰式命名
AngularJS 指令的交互详解及实例代码
10-21
1. **AngularJS 指令的创建与基本结构**：文档提到了如何创建基本的AngularJS指令，这涉及到AngularJS模块的创建以及使用module.directive()方法定义指令。每个指令都有其自己的配置对象，其中包括了定义指令行为的...
AngularJS自定义控件实例详解
10-20
本文将详细介绍AngularJS自定义控件的创建方法，并通过实例来深入探讨如何使用自定义指令和模板操作的相关函数与技巧。 首先，需要了解AngularJS中什么是自定义控件。在AngularJS中，自定义控件通常是通过自定义...
AngularJS中directive指令使用之事件绑定与指令交互用法示例
10-21
主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用，事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
[Angular 基础] - 自定义指令，深入学习 directive
GoldenaArcher的博客
02-20 1911
这篇笔记的前置笔记为，对 Angular 的 directives 不是很了解的可以先过一下这篇笔记。
你知道用AngularJs怎么定义指令吗？
weixin_30641465的博客
11-03 218
前言 最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。 欢迎批评指出错误的地方。 Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 ...
angularJS - directive
yxyCyndi的博客
06-16 425
一、directive介绍1.什么指令，从指令的用法，我可以这么解释，指令使用在dom元素上（例如属性、元素名、注释或class类），可以只是AngularJs的html编译器（$compile）将制定的行为附加在该DOM元素上（例如通过事件监听事件），甚至可以转换成DOM元素及其子集。 2.angular 自带了一系列的指令，例如：ng-Bind,ng-model和ng-class。就像创建co
angular directive 实现自定义事件
米斯特尔曾的博客
10-22 2563
directive 通过directive可以获取到dom节点，并且可以在基础事件之上分装自定义的一些事件 ###例子 host-listen.directive.ts import { Directive, Output, EventEmitter, OnInit, Renderer, Renderer2, ElementRef } from '@angular/core'; @Directi...
AngularJs学习笔记--directive
weixin_30244889的博客
09-09 91
原版地址：http://code.angularjs.org/1.0.2/docs/guide/directive 　　Directive是教HTML玩一些新把戏的途径。在DOM编译期间，directives匹配HTML并执行。这允许directive注册行为或者转换DOM结构。 　　Angular自带一组内置的directive，对于建立WebApp有很大帮助。继续扩展的话，可以...
AngularJS提供了丰富的指令（Directives），用于扩展HTML的功能和实现自定义的行为和样式
最新发布
BLOG域名:programb.blog.csdn.net
02-28 975
指令是AngularJS中最重要的概念之一，它允许开发者通过在HTML中添加自定义标签、属性或类名的方式来定义指令，并将其与相应的JavaScript代码关联起来。在AngularJS中，指令有多种类型，包括元素指令、属性指令、类指令和注指令。创建自定义元素指令：通过自定义元素指令，可以创建全新的HTML元素，并定义其行为和样式。指令函数可以接收参数，例如指令的作用域、元素、属性等。这些指令可以用于扩展HTML的功能和行为，使开发者能够创建自定义的HTML元素、属性和类，并通过指令来控制它们的行为和样式。
AngularJS的directive（指令）的配置选项说明
lai_xu的专栏
11-03 949
AngularJS的directive（指令）的配置选项说明
angularJs 简单实例
蚂蚁先锋队的博客
01-22 670
入口 agtest.html Insert title here  A  B   testApp.js /**获得全局app对象*/ var testApp = angular.module('testApp', [ 'ngRoute']); /**配置路由器*/ testApp.conf
AngularJS指令详解与实例
5. 自定义指令 AngularJS允许开发者创建自定义指令，以实现更复杂的DOM操作和功能扩展。例如，你可以创建一个指令来处理特定的用户交互或DOM变换： ```javascript angular.module('myApp').directive('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值