AngularJS 指令

AngularJS 指令（Directives）是 AngularJS 框架的重要特性之一，它们用于扩展 HTML 的功能，允许开发者创建自定义的行为、控制页面元素、进行数据绑定等。指令本质上是对 DOM 元素进行扩展、修饰、操作的特殊标记，它们使得应用程序的视图与控制逻辑之间的连接更加紧密和灵活。

AngularJS 指令通过 ng-* 前缀（如 ng-model, ng-repeat）来实现，或者也可以定义自定义的指令。

AngularJS 指令的作用

指令允许开发者：

  1. 绑定数据：自动把模型的数据绑定到视图中。
  2. 操作 DOM 元素：对 HTML 元素的行为进行修改。
  3. 创建可重用组件：创建可自定义的指令或组件，提高代码的复用性和模块化。

AngularJS 常用内建指令

  1. ng-model
    • 功能：将 HTML 表单控件（如 <input>, <select> 等）与 AngularJS 的模型（数据）绑定。
    • 用法：ng-model 绑定数据与表单元素之间的双向数据绑定。
    示例： <div ng-app="myApp" ng-controller="myController"> <input type="text" ng-model="name"> <p>你的名字是: {{ name }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.name = '张三'; }); </script> 在这个例子中，ng-model="name" 将输入框与 name 绑定，任何在输入框中输入的内容都会自动更新 name 变量。
  2. ng-repeat
    • 功能：用于在视图中循环渲染一个数组或对象。
    • 用法：ng-repeat 可以遍历数组，并动态地生成元素。
    示例： <div ng-app="myApp" ng-controller="myController"> <ul> <li ng-repeat="item in items">{{ item }}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.items = ['苹果', '香蕉', '橙子']; }); </script> 在这个例子中，ng-repeat="item in items" 会遍历数组 items，并为每个元素动态生成 <li> 标签。
  3. ng-if
    • 功能：根据条件动态地添加或移除 DOM 元素。
    • 用法：ng-if 根据给定的条件决定是否渲染 DOM 元素。
    示例： <div ng-app="myApp" ng-controller="myController"> <button ng-click="isVisible = !isVisible">切换显示</button> <p ng-if="isVisible">这段文字只有在 isVisible 为 true 时才会显示</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.isVisible = false; }); </script> 在这个例子中，ng-if="isVisible" 控制段落的显示与隐藏。
  4. ng-show 和 ng-hide
    • 功能：根据条件控制元素的显示与隐藏。
    • 用法：ng-show 和 ng-hide 分别通过 CSS 的 display 属性控制元素的显示与隐藏。
    示例： <div ng-app="myApp" ng-controller="myController"> <button ng-click="isVisible = !isVisible">切换显示</button> <p ng-show="isVisible">显示内容</p> <p ng-hide="isVisible">隐藏内容</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.isVisible = false; }); </script> 这里，ng-show 和 ng-hide 控制段落的显示与隐藏，但两者不完全相同。ng-show 会设置 display: block，而 ng-hide 会设置 display: none。
  5. ng-class
    • 功能：动态地为 HTML 元素添加 CSS 类。
    • 用法：ng-class 根据条件添加或移除类。
    示例： <div ng-app="myApp" ng-controller="myController"> <button ng-click="isRed = !isRed">切换颜色</button> <p ng-class="{'red-class': isRed}">这段文字的颜色根据条件变化</p> </div> <style> .red-class { color: red; } </style> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.isRed = false; }); </script> 这个例子中，ng-class 根据 isRed 的值动态地为 <p> 标签添加或移除 red-class 类，从而控制文字的颜色。
  6. ng-click
    • 功能：为 HTML 元素添加点击事件处理。
    • 用法：ng-click 绑定一个表达式或方法，当元素被点击时执行。
    示例： <div ng-app="myApp" ng-controller="myController"> <button ng-click="increment()">增加计数</button> <p>当前计数: {{ counter }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.counter = 0; $scope.increment = function() { $scope.counter++; }; }); </script> 在这个例子中，ng-click="increment()" 会在点击按钮时调用 increment() 函数并增加 counter 的值。

自定义指令

除了内建指令，AngularJS 还允许开发者创建自己的自定义指令，增加应用的复用性和模块化。

自定义指令的基本语法：

app.directive('myDirective', function() {
    return {
        restrict: 'E', // 'E'表示标签指令
        template: '<h1>这是一个自定义指令</h1>'
    };
});

在 HTML 文件中使用自定义指令：

<my-directive></my-directive>

自定义指令的配置选项

  1. restrict：指定指令的类型，常用值为：
    • 'A'：属性指令（例如 <div my-directive></div>）
    • 'E'：元素指令（例如 <my-directive></my-directive>）
    • 'C'：类指令（例如 <div class="my-directive"></div>）
    • 'M'：注释指令（例如 <!-- my-directive -->）
  2. template：定义指令的模板。
  3. link：定义指令的链接函数，通常用于绑定 DOM 元素和业务逻辑。
  4. controller：为指令提供一个控制器。

总结

  • AngularJS 指令 是扩展 HTML 的强大工具，可以让开发者通过声明式语法来增强 DOM 元素的行为和功能。
  • 常见的内建指令如 ng-model、ng-repeat、ng-if、ng-show、ng-hide、ng-click 等，都是 AngularJS 提供的常用工具，简化了视图和控制器的交互。
  • AngularJS 支持自定义指令，让开发者可以创建符合需求的复杂行为，并使应用更加模块化、可重用。