http://www.runoob.com/angularjs/angularjs-directives.html
- [ ] 创建自定义的指令
- 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
- 你可以使用 .directive 函数来添加自定义的指令。
- 要调用自定义指令，HTML 元素上需要添加自定义指令名。
- 使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<!--调用自定义指令-->
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
//注意第一个参数采用驼峰命名，但是在9行调用时，却又变为小写<runoob-directive>
//app.directive();第一个参数：自定义指令名称；第二个参数，回调函数
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
-
[x] 你可以通过以下方式来调用指令：
-
元素名
-
属性
-
类名
-
注释
-
[ ] 元素名
<runoob-directive></runoob-directive>
- [ ] 属性
<div runoob-directive></div>
- [ ] 类名
<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>
- [ ] 注释
<!-- 指令: runoob-directive -->
<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>
<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>
</body>
- restrict 值可以是以下几种:
- E 只限元素名使用
- A 只限属性使用
- C 只限类名使用
- M 只限注释使用
- restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令