AngularJS 指令(Directives)是一种扩展 HTML 的机制,用于创建可重用的组件、控制 DOM 行为以及在 HTML 中添加额外功能。指令是 AngularJS 的一个核心概念,它们以 ng- 前缀开头,并通过在 HTML 中声明指令来扩展 HTML 标签的功能。

以下是 AngularJS 中常用的一些指令:

1. ng-app

ng-app 指令定义了 AngularJS 应用程序的根元素。它通常被放置在 <html> 或 <body> 标签中。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Directives</title>
  <!-- AngularJS 库的引入 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- AngularJS 应用程序的引入 -->
  <script src="app.js"></script>
</head>
<body>
  <!-- AngularJS 应用程序的内容 -->
</body>
</html>

2. ng-controller

ng-controller 指令定义了一个控制器,并将控制器与 HTML 元素关联。
<div ng-controller="myController">
  <!-- 这里是控制器的作用域 -->
</div>

3. ng-model

ng-model 指令用于在输入元素和作用域中创建双向数据绑定。
<input type="text" ng-model="username" />
<p>{{ username }}</p>

4. ng-repeat

ng-repeat 指令用于迭代数组或对象,并为每个元素创建副本。
<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

5. ng-click

ng-click 指令用于在元素上绑定点击事件。
<button ng-click="doSomething()">Click me</button>

6. ng-show 和 ng-hide

ng-show 和 ng-hide 指令用于根据表达式的值显示或隐藏元素。
<p ng-show="isLoggedIn">Welcome!</p>
<p ng-hide="isLoggedIn">Please log in.</p>

7. ng-if

ng-if 指令用于根据表达式的值添加或移除 DOM 元素。
<div ng-if="isSpecial">This is a special item</div>

8. ng-src

ng-src 指令用于在 img 标签中动态设置图片的 src 属性。
<img ng-src="{{ imageUrl }}" alt="Dynamic Image" />

这只是 AngularJS 指令的一小部分,AngularJS 提供了许多其他有用的指令,包括自定义指令的创建。自定义指令允许开发者扩展 AngularJS 的功能,创建可复用的组件和功能。在实际应用中,理解和熟练使用这些指令是非常重要的。


转载请注明出处:http://www.pingtaimeng.com/article/detail/4856/Angular