> For the complete documentation index, see [llms.txt](https://xiaoxiami.gitbook.io/angularjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaoxiami.gitbook.io/angularjs/zhi_ling/angular_zi_ding_yi_zhi_ling/restricttemplatereplaceshu_xing.md).

# restrict、template、replace属性

## restrict

* restrict:指令在模版中的使⽤方式
* 可以4种风格任意组合，如果忽略restrict，默认为A
* 如果打算支持IE8，请使用基于属性和样式类的指令

| 字母 | 风格  | 示例                                   |
| -- | --- | ------------------------------------ |
| E  | 元素  | `<my-dir></my-dir>`                  |
| C  | 样式类 | `<span class="my-dir: exp;"></span>` |
| A  | 属性  | `<span my-dir="exp"></span>`         |
| M  | 注释  | `<!-- directive: my-dir exp -->`     |

## template

* template:模板内容，这个内容会根据 replace 参数的设置

  替换节点或只替换节点内容。

## replace

* replace:如果此配置为true则替换指令所在的元素，如果为false或者不指定，则把当前指令追加到所在的元素内部
* 对于restrict为元素(E)在最终效果中是多余的，所有replace通常设置为true

**例子：**

```markup
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <custom-tags>1212</custom-tags>

    <div class="custom-tags">

    </div>

    <div custom-tags>

    </div>

    <!-- directive:custom-tags -->
</div>


<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>
```

app/index.js

```javascript
var myApp = angular.module('myApp', [], ['$compileProvider',function ($compileProvider) {

    $compileProvider.directive('customTags',function(){
        return {
            restrict:'ECAM',
            template:'<div>custom-tags-html</div>',
            replace:true
        }
    });

}])
```
