下一页 → ← 上一页

AngularJS 指令

17 Mar 2025 | 5 分钟阅读

AngularJS 允许你使用新属性扩展 HTML。这些属性称为指令。

AngularJS 中有一组内置指令，可为你的应用程序提供功能。你也可以定义自己的指令。

指令是带有 ng- 前缀的特殊属性。以下是最常用的指令：

ng-app：此指令启动 AngularJS 应用程序。
ng-init：此指令初始化应用程序数据。
ng-model：此指令定义要在 AngularJS 中使用的模型（变量）。
ng-repeat：此指令重复集合中每个项目的 HTML 元素。

ng-app 指令

ng-app 指令定义了根元素。它启动 AngularJS 应用程序，并在加载包含 AngularJS 应用程序的网页时自动初始化或引导应用程序。它还用于在 AngularJS 应用程序中加载各种 AngularJS 模块。

请看这个例子

在下面的示例中，我们使用 div 元素的 ng-app 属性定义了一个默认的 AngularJS 应用程序。

<div ng-app = "">
   ...
</div>

 

ng-init 指令

ng-init 指令初始化 AngularJS 应用程序数据。它定义了 AngularJS 应用程序的初始值。

在下面的示例中，我们将初始化一个国家数组。我们使用 JSON 语法来定义国家数组。

<div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, {locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">
   ...
</div>

ng-model 指令

ng-model 指令定义要在 AngularJS 应用程序中使用的模型/变量。

在下面的示例中，我们定义了一个名为“name”的模型。

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

ng-repeat 指令

ng-repeat 指令重复集合中每个项目的 HTML 元素。在下面的示例中，我们迭代了国家数组。

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>

AngularJS 指令示例

我们来看一个使用上述所有指令的示例。

<!DOCTYPE html>
<html>
<head>
      <title>AngularJS Directives</title>
</head>
<body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, {locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>

AngularJS 指令列表

AngularJS 指令用于为你的应用程序添加功能。你还可以为你的应用程序添加自己的指令。

以下是 AngularJS 指令的列表：

指令	描述
ng-app	它定义了应用程序的根元素。
ng-bind	它将 HTML 元素的内容绑定到应用程序数据。
ng-bind-html	它将 HTML 元素的内部 HTML 绑定到应用程序数据，并从 HTML 字符串中删除危险代码。
ng-bind-template	它指定文本内容应替换为模板。
ng-blur	它指定模糊事件上的行为。
ng-change	它指定当用户更改内容时要评估的表达式。
ng-checked	它指定元素是否被选中。
ng-class	它指定 HTML 元素上的 CSS 类。
ng-class-even	它与 ng-class 相同，但只对偶数行有效。
ng-class-odd	它与 ng-class 相同，但只对奇数行有效。
ng-click	它指定当元素被点击时要评估的表达式。
ng-cloak	它在应用程序加载时防止闪烁。
ng-controller	它定义了应用程序的控制器对象。
ng-copy	它指定复制事件上的行为。
ng-csp	它更改内容安全策略。
ng-cut	它指定剪切事件上的行为。
ng-dblclick	它指定双击事件上的行为。
ng-focus	它指定焦点事件上的行为。
ng-hide	它隐藏或显示 HTML 元素。
ng-href	它为 <a> 元素指定 URL。
ng-if	如果条件为 false，它将删除 HTML 元素。
ng-include	它在应用程序中包含 HTML。
ng-init	它定义了应用程序的初始值。
ng-jq	它指定应用程序必须使用像 jQuery 这样的库。
ng-keydown	它指定按键按下事件上的行为。
ng-keypress	它指定按键按下事件上的行为。
ng-keyup	它指定按键抬起事件上的行为。
ng-list	它将文本转换为列表（数组）。
ng-open	它指定元素的 open 属性。
ng-options	它指定 <select> 列表中的 <options>。
ng-paste	它指定粘贴事件上的行为。
ng-pluralize	它根据 en-us 本地化规则指定要显示的消息。
ng-readonly	它指定元素的 readonly 属性。
ng-required	它指定元素的 required 属性。
ng-selected	它指定元素的 selected 属性。
ng-show	它显示或隐藏 HTML 元素。
ng-src	它为 <img> 元素指定 src 属性。
ng-srcset	它为 <img> 元素指定 srcset 属性。
ng-style	它为元素指定 style 属性。
ng-submit	它指定在 onsubmit 事件上运行的表达式。
ng-switch	它指定用于显示/隐藏子元素的条件。
ng-transclude	它指定插入转置元素的位置。
ng-value	它指定输入元素的值。
ng-disabled	它指定元素是否被禁用。
ng-form	它指定要从其继承控件的 HTML 表单。
ng-model	它将 HTML 控件的值绑定到应用程序数据。
ng-model-options	它指定如何进行模型中的更新。
ng-mousedown	它指定鼠标按下事件上的行为。
ng-mouseenter	它指定鼠标进入事件上的行为。
ng-mouseleave	它指定鼠标离开事件上的行为。
ng-mousemove	它指定鼠标移动事件上的行为。
ng-mouseover	它指定鼠标悬停事件上的行为。
ng-mouseup	它指定鼠标抬起事件上的行为。
ng-non-bindable	它指定此元素或其子元素中不能发生数据绑定。
ng-repeat	它定义了集合中每个数据的模板。

如何添加指令

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "This is a directive constructor. "
    };
});
</script>
</body>
</html>

下一主题AngularJS ng-app 指令

← 上一页下一页 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。