angular指令传值（源码及注释）

╰+攻爆jí腚メ 2021-09-11 05:18 218阅读 0赞

# angular指令传值（源码及详细注释） #

--------------------

### 目录 ###

*  angular指令传值源码及详细注释
    
     *   *  目录
         *  html代码部分
         *  js代码部分
         *  css样式部分
         *  浏览器运行截图
     *   *  尾注

### html代码部分 ###

代码块语法遵循标准markdown代码，例如：

<html ng-app='expanderModule'>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
            <script src="js/angular-1.3.0.js"></script>
            <script src="ExpanderSimple.js"></script>
        </head>
        <body>
            <div ng-controller='SomeController'>
                
                <expander class='expander' expander-title='controllerTitle' expander-text='controllerText'>
    
                    <h1>第一个指令html原本的标题h1</h1>
                    <p>第一个指令html原本的内容ppppppppppppp</p>
                </expander>
            </div>
            <div ng-controller='SomeController2'>
                <expander class='expander' expander-title='controllerTitle' expander-text='controllerText'>
                    
                    <h1>第二个指令html原本的标题h1</h1>
                    <p>第二个指令html原本的内容ppppppppppppp</p>
                </expander>
            </div>
        </body>
    </html>

--------------------

### js代码部分 ###

代码块语法遵循标准markdown代码，例如：

--------------------

### 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; }

### 浏览器运行截图 ###

## >![浏览器运行截图与console打印结果][console] ##

### 尾注 ###

**上述例子详细说明了指令是如果被调用和复用的，以及scope是如何在指令和父级controller，多个controller之间传递的**

> **关于指令中的scope对象**：scope\[boolean or object\]属性，该属性是用来定义指令的scope的范围，默认情况下是false。  
> 即该指令继承了父controller的scope，可以随意的使用父controller的scope里的属性，但是这样的话就会污染到父scope里的属性，**这样是不可取的**。

--------------------

> **一般来说我们可以让scope取以下两个值：true和\{\}**，  
> **scope：true**时，angular为这个指令创建了一个继承于父scope的scope，然后在指令的template属性中，可以直接使用\{ \{\}\}从父scope中继承过来属性。  
> **scope:\{ \{\}\}**时，表示创建独立作用域scope，不会继承父scope的属性。但是在有的时候我们也要需要访问父scope里的属性或者方法，有@，=和&的方法可以实现。

--------------------

> **link里面参数解释**  
> link : function(scope, element, attrs) \{\}

element简单说就是$(‘my-dialog’)  
attrs是个map，内容是你这个directive上的所有属性，例如：你在页面上如果这样写了directive:

<my-dialog type="modal" animation="fade"></my-dialog>

那attrs就是：
    { type: 'modal', animation: 'fade' }
    
    >elm：输出一个元素数组，数组中的每个元素是调用directive的DOM树
    
    attrs:输出一个Object, Object内是该DOM元素的各种属性方法

--------------------

[console]: /images/20210813/1255898e26d84362b9c97b343356df8b.png