AngularJS内置指令有哪些？常用内置指令用法与区别是什么？

AngularJS作为一款经典的前端JavaScript框架，其核心优势之一便是通过内置指令简化DOM操作，实现数据与视图的双向绑定，这些内置指令如同开发者工具箱中的瑞士军刀，覆盖了从数据绑定、事件处理到表单验证、DOM结构控制等多个方面,为构建动态交互式应用提供了坚实基础。

数据绑定与显示指令

数据绑定是AngularJS的灵魂，而ng-model与ng-bind（及其简写）是实现这一功能的核心指令。ng-model指令将表单元素（如输入框、选择框）的值与$scope对象中的属性进行双向绑定，当用户修改表单内容时，$scope数据会实时更新，反之亦然。<input type="text" ng-model="username">会将输入框的值与$scope.username关联，而ng-bind则以更安全的方式显示数据，避免页面加载时出现未渲染的模板代码（如{{username}}闪烁问题），其使用方式为<div ng-bind="username"></div>。ng-bind-template可同时绑定多个文本片段，ng-cloak指令则能配合CSS样式，在数据加载完成前隐藏未渲染的元素,确保用户体验流畅。

条件渲染与循环指令

AngularJS提供了灵活的条件渲染与循环指令，以动态控制DOM元素的显示与重复。ng-if指令会根据表达式的值（true/false）决定是否创建或销毁DOM元素，当条件为false时，元素及其子节点会从DOM中完全移除，与ng-hide（仅通过CSS隐藏）有本质区别。ng-show和ng-hide则通过添加或移除ng-hide类（默认设置display:none）来控制元素可见性，适合频繁切换显示的场景，在循环渲染方面，ng-repeat是核心指令，它遍历数组或对象，为每个元素创建一个DOM实例。<li ng-repeat="item in items">{{item.name}}</li>会遍历$scope.items数组，为每个item生成一个li元素。ng-repeat还支持$index（当前索引）、$first/$last/$middle（判断是否为首尾/中间元素）等内置变量,便于实现复杂的列表逻辑。

事件与表单指令

AngularJS通过丰富的事件指令简化用户交互处理。ng-click是最常用的点击事件指令，<button ng-click="saveData()">保存</button>会在点击时触发$scope中的saveData方法，类似地，ng-dblclick处理双击事件，ng-mousedown/ng-mouseup处理鼠标按下/抬起事件，ng-keypress/ng-keydown/ng-keyup则监听键盘事件，在表单处理上，ng-form指令可创建嵌套表单作用域，实现复杂表单的分组验证。ng-required、ng-minlength、ng-maxlength等指令用于设置表单验证规则，与$valid、$invalid、$dirty等表单属性结合，可轻松实现表单校验反馈。<input type="email" ng-model="email" ng-required>会确保email字段必填且符合邮箱格式。

DOM结构与样式指令

AngularJS还提供了控制DOM结构和样式的指令。ng-include用于加载外部HTML模板并插入当前DOM，如<div ng-include="'header.html'"></div>，便于实现模块化页面布局。ng-switch根据表达式的值切换显示对应的子元素，需配合ng-switch-when和ng-switch-default使用，在样式控制方面，ng-class支持动态绑定CSS类，可通过对象（{active: isActive}）、数组（['class1', 'class2']）或字符串形式灵活添加样式；ng-style则允许直接通过JavaScript对象设置内联样式，如<div ng-style="{color: textColor, fontSize: '16px'}"></div>。ng-nonBindable指令可禁用指定元素内的AngularJS解析,适合显示原始模板代码。

内置指令速查表

AngularJS内置指令通过声明式的语法，将复杂的DOM操作封装为可复用的组件，显著提升了开发效率，虽然现代前端框架（如Vue、React）在生态和性能上更具优势，但AngularJS的指令设计理念仍对后续框架产生了深远影响,理解其核心指令有助于掌握前端框架的设计思想。