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

例子：

<!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

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

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

}])
PreviousAngular 自定义指令NexttemplateUrl属性

Last updated

Was this helpful?