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. Linux：Vmware安装linux虚拟机，桥接方式配置静态IP后重启网卡，提示：Error,some other host already uses address 10.252.252.21...

    问题: Vmware安装linux虚拟机,桥接方式配置静态IP后重启网卡,提示:Error,some other host already uses address 10.252.252.21... ...

  2. re正则表达式

    1.matchimport rem = re.match("[0-9]{0,10}","7564565abcdefg") #match从开头开始匹配if m: ...

  3. ARCGIS多种影像裁剪

    在互联网上下载的遥感影像都进行过分幅处理,下载下来的影像多是规则的四方形,而在进行遥感影像研究时,多是针对特定区域来进行,比如研究北京市的遥感影像,不在北京市范围内的影像对于研究者就没有利用意义,如果 ...

  4. jq实现全选、全不选、反选

    基本思路: 1全选:点击全选按钮的时候,将input的属性checked设置为true; 2全不选:点击全不选按钮的时候,将input的属性checked设置为false; 3反选:点击反选按钮的时候 ...

  5. Android异常：唤醒锁未授权。（Caused by: java.lang.SecurityException: Neither user 10044 nor current process has android.permission.WAKE_LOCK.）

    Android异常:Caused by: java.lang.SecurityException: Neither user 10044 nor current process has android ...

  6. ASP.NET泛型List的各种用法Skip、Take等

    List在.NET里面使用得非常频繁,但有好多人不了解它各种小用法.我就一直记不大住... asp.net中List的简单用法,例如: 1 2 3 4 5 6 7 List<int> li ...

  7. Windows下用Python 3.4+自带的venv模块创建虚拟环境

    Python 3.4+自带了venv模块,用于创建虚拟环境,每个虚拟环境都可以安装一套独立的第三方模块. 本文在Windows 10上操作. 1.创建一个虚拟环境: D:\>mkdir test ...

  8. mysql ERROR 1062: ALTER TABLE causes auto_increment resequen

    当我用Navicat尝试修改已有记录的mysql数据表的主键为自动增长时,报出以下错误 1602 ALTER TABLE causes auto_increment resequencing, res ...

  9. subversion(SVN)常规使用

    语法: svn <subcommand> [options] [args]      使用“svn help <subcommand>” 显示子命令的帮助信息.      使用 ...

  10. document.createElement()方法

    document.createElement()是在对象中创建一个对象,主要和appendChild() 方法或者insertBefore() 方法联合使用. appendChild() 方法在节点的 ...