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>

 

posted @ 2015-10-27 11:05  简惬  阅读(243)  评论(0编辑  收藏  举报