restrict取值

指令的使用范围

restrict 的取值可以有三种：

• A 用于元素的 Attribute，这是默认值
• E 用于元素的名称
• C 用于 CSS 中的 class

比如说，我们这样定义指令。

var app = angular.module("app", [])
    .directive("hello", function () {
        var option = {
            restrict: "AEC",
            template: "Hello, Directive",
        };
        return option;
    })

由于我们指定了可以用于三种情况下，那么，就可以如下三种形式来使用这个指令

<!-- 元素 -->
<div>
    <hello></hello>
</div>

<!-- 属性-->
<div>
    <div hello></div>
</div>

<!-- class -->
<div>
    <div class="hello"></div>
</div>

输出的结果分别如下：

<!-- 元素 -->
<div>
    <hello>Hello, Directive</hello>
</div>
<!-- 属性-->
<div>
    <div hello="">Hello, Directive</div>
</div>
<!-- class -->
<div>
    <div class="hello">Hello, Directive</div>
</div>