Angular JS--指令

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30768175

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-scl/p/7735309.html

本文介绍了AngularJS的基本概念，包括如何通过指令扩展HTML的功能，并详细解释了常见指令的作用及使用方法。此外，还提供了创建自定义指令的具体步骤和示例。

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

1.Angular JS描述

　　Angular JS是通过指令来扩展HTML，带有前缀ng-
　 AngularJS 通过内置的指令来为应用添加功能。
　 AngularJS 允许你自定义指令。

2.常见指令

　　ng-app：指令初始化一个 AngularJS 应用程序。
　　ng-init ：指令初始化应用程序数据。
　　ng-model ：指令把元素值（比如输入域的值）绑定到应用程序。

　　ng-repeat：遍历数组或集合数据

3.创建自定义指令

　　使用 .directive 函数来添加自定义的指令。
　　要调用自定义指令，HTML 元素上需要添加自定义指令名。
　　使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:　

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

　　调用自定义指令：

　　　　通过元素名调用：例<runoob-directive></runoob-directive>

　　　　通过属性调用：例<div runoob-directive></div>

　　　　通过类名调用：例<div class="runoob-directive"></div>需要指定restrict : "C",

通过注释调用：例需要指定restrict : "M",

　　restrict 值可以是以下几种:　(restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令)

　　　　E 作为元素名使用
　　　　A 作为属性使用
　　　　C 作为类名使用
　　　　M 作为注释使用

转载于:https://www.cnblogs.com/-scl/p/7735309.html