angular-创建自定义的指令

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sakura-sakura/p/6678866.html

文章标签：

#javascript #ViewUI

本文介绍了如何在AngularJS中创建自定义指令，并提供了详细的示例。包括如何使用.directive函数添加指令，以及如何通过元素名、属性、类名和注释等方式调用自定义指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>