以下是 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