multiElement不太常用，从下面这个例子可以大致看出它的作用：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

        var app = angular.module("app", []);

        app.directive('myDirective',function () {

            return{

                multiElement:true,

                link:function(scope,element,attrs){

                    console.log(element);

                }

            };

        });

    </script>

</head>

<body ng-app="app">

<span my-directive-start></span>

<span my-directive-end></span>

</body>

</html>

在Chrome浏览器中审查元素，看看控制台输出：

由此可知传给连接函数的element不是单个元素，而是3个，包括两个span和一个回车符。

实际上，我们把HTML代码改成：

<my-directive><span></span>

<span></span></my-directive>

控制台输出：

这时候我们仍然可以在childNodes中找到它们。

所以把multiElement设为true的目的，仅仅是引入my-directive-start、my-directive-end这两个标记，在某些时候有利于我们书写。

现在看看AngularJs内置指令ngRepeat（可以使用ng-repeat-start和ng-repeat-end）类似的做法：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

        var app = angular.module("app", []);

        app.run(function ($rootScope) {

            $rootScope.list = [{name: '张三', age: 26, gender: '男'}, {name: '李四', age: 24, gender: '男'}];

        });

    </script>

</head>

<body ng-app="app">

<table border="1">

    <tbody>

    <tr ng-repeat-start="l in list">

        <td>{{l.name}}</td>

        <td></td>

    </tr>

    <tr ng-repeat-end>

        <td>{{l.age}}</td>

        <td>{{l.gender}}</td>

    </tr>

    </tbody>

</table>

</body>

</html>

输出：

张三  
26 男
李四  
24 男

如果没有ng-repeat-start和ng-repeat-end，用ng-repeat输出上面的东西，很吃力。

我们在ng-repeat-start和ng-repeat-end之间可以任意胡来，例子：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

        var app = angular.module("app", []);

        app.run(function ($rootScope) {

            $rootScope.list = [{name: '张三', age: 26, gender: '男'}, {name: '李四', age: 24, gender: '男'}];

        });

    </script>

</head>

<body ng-app="app">

<table border="1">

    <tbody>

    <tr ng-repeat-start="l in list">

        <td>{{l.name}}</td>

    </tr>

    <tr>

        <td>{{l.age}}</td>

    </tr>

    <tr ng-repeat-end>

        <td>{{l.gender}}</td>

    </tr>

    </tbody>

</table>

</body>

</html>

输出：

张三
26
男
李四
24
男

AngularJs自定义指令详解（7） - multiElement的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  3. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  4. AngularJs自定义指令详解（5） - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  5. AngularJs自定义指令详解（9） - terminal

    例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  6. AngularJs自定义指令详解（8） - priority

    priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...

  7. AngularJs自定义指令详解（3） - scope

    我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...

  8. AngularJs自定义指令详解（10） - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  9. AngularJs自定义指令详解（4） - transclude

    transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...

随机推荐

  1. 使用 Wireshark 调试 HTTP/2 流量

    https://imququ.com/post/http2-traffic-in-wireshark.html

  2. PAT 03-树1 树的同构 (25分)

    给定两棵树T1和T2.如果T1可以通过若干次左右孩子互换就变成T2,则我们称两棵树是"同构"的.例如图1给出的两棵树就是同构的,因为我们把其中一棵树的结点A.B.G的左右孩子互换后 ...

  3. 如何设置Java开发环境

    傻瓜式 设置Java开发环境 跟我来. 对与win7操作系统.有两种方法. 第一种: 1.下载JDK,完成安装. 2.右键我的电脑,选择属性,在左边找到高级系统设置左键单击打开,在高级选项中找到 环境 ...

  4. Spring-Batch CSV文件读取时的注意点

    按照Spring Batch 之 Sample(CSV文件操作)(四) 的方式配置好csvItemReader, 发现读入的数据很是奇怪,通过修改配置文件发现, commit-interval=&qu ...

  5. Memcached安装配置及访问

    1.Memcached键值对访问,对于网页来说,key需要使用uri. 2.Memcached的相关配置 memcached:缓存服务器,但本身无法决定缓存任何数据 一半依赖于客户端,一半依赖于服务端 ...

  6. hadoop-2.2.0 的编译安装及HA配置

    一 准备工作 准备工作中要求有 1.centOs 6.4,添加hadoop用户,配置集群内的/etc/hosts文件. 2.安装hadoop用户的ssh,并打通集群内所有机器,(ha执行fencing ...

  7. GDT 学习笔记逻辑地址和线性地址计算，因为是自学，所以这只是我的个人理解，不对的请大家指导。

    在 bochs 刚开始的时候 gdt 是未知的,需要通过实模式的16位代码段初始化 gdt 信息, 在 lgdt 指令之后,即可以使用程序自定义的 GDT 表了. 假如:gdt 初始地址为 0x7c7 ...

  8. sql 2012日志文件频繁出现：svchost (4892) 数据库引擎已分离数据库(1、C:\Windows\system32\LogFiles\Sum\Current.mdb)

    svchost (4892) 数据库引擎已分离数据库(1.C:\Windows\system32\LogFiles\Sum\Current.mdb).(时间=0 秒) 内部计时序列: [1] 0.00 ...

  9. kendoTreeView，需要注意的地方

    今天使用了下kendoUI中的TreeView控件,一开始的时候总是不成功, 总是会报 Uncaught TypeError: Cannot read property 'toLowerCase' o ...

  10. ORA-01033: ORACLE 正在初始化或关闭 进程 ID: 0 会话 ID: 0 序列号: 0

    用了很长时间的数据库,一直都挺好,今天早上一来报这个错,开始追究原因. 1.用SYS用户登录: 2.将数据库修改为打开状态,alter database open,出现如下的错误提示: ORA-160 ...