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. MongoDB（五）mongo语法和mysql语法对比学习

    我们总是在对比中看到自己的优点和缺点,对于mongodb来说也是一样,对比学习让我们尽快的掌握关于mongodb的基础知识. mongodb与MySQL命令对比 关系型数据库一般是由数据库(datab ...

  2. java 获取当月第一天和最后一天 获取前一个月第一天和最后一天

    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");                    //获取前月的第一 ...

  3. python之GUI编程（二）win10 64位 pygame的安装

    pygame的下载网址: http://www.pygame.org/download.shtml 我下载了第一个 很显然,安装的时候出现了如图中的尴尬,更改了安装目录后,在Python shell中 ...

  4. jqurey的跨域使用getjson(http://www.jb51.net/Special/894.htm)

    JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点:有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUER ...

  5. PS Web切图界面设置

    界面为移动工具时(快捷键V),选中左上角的图层. 点击视图,选中显示→智能参考线,与标尺. 点击窗口,把"库" "颜色"去掉,把屏幕右上角的"通道&q ...

  6. IT行业找工作难

    1.面试官主要看年龄,年龄小,技术再牛也不给你面试机会. 2.现在培训机构太多了,不管多大岁数的人看见这行业赚钱就立刻辞职去培训. 3.刚培训出来的能找到2w!!有的老板面试只看工作经验,不管之前干什 ...

  7. Express安装过程

    1,首选全局安装express,进入nodejs的安装目录执行以下语句 npm install -g express 2,安装工具 npm install -g express-generator 3 ...

  8. android常用调试工具fiddle、wireshark和android studio的配置

    Fiddle配置android代理 在wifi的同一个局域网环境的windows主机中安装fiddler,并且启动,如本次192.168.3.14 在android手机端配置代理为该主机 还有一种方式 ...

  9. Java：多态（向上转型）

    先来看一段代码: class BaseClass{          public int book = 6;          public void base(){         System. ...

  10. 为控件Button设置快捷键（组合键）

    控件MenuStrip和ContextMenuStrip可通过ShortCcutKeys属性设置快捷键,而控件Button没有ShortcutKey属性,如何为控件Button设置快捷键呢(组合件键) ...