AngularJS 指令学习笔记

什么是指令

指令是 AngularJS 中最常用的概念之一。它们是用来扩展 HTML 元素和属性的标记，使其具有更多的行为和功能。

指令可以添加特定的行为、操作 DOM 中的元素、调用控制器中的方法、引入外部模板等。

自定义指令

除了 AngularJS 自带的指令，我们还可以创建自定义指令来满足我们的需求。自定义指令通过 directive() 方法进行创建，其中包含以下几个选项：

• restrict：指令如何被使用（E 表示元素名，A 表示属性名，C 表示类名，M 表示注释）
• template：指令的 HTML 模板
• link：指令的链接函数，用于处理关于该指令的 DOM 操作和事件绑定等

举例

比如我们现在想要创建一个自定义指令来限制用户的输入格式，只能输入数字，我们可以这样写：

javascriptCopy Code
angular.module('myApp', [])
  .directive('onlyNumber', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.bind('keypress', function(event) {
          if(event.which < 48 || event.which > 57) {
            event.preventDefault();
          }
        });
      }
    };
  });

上面的代码中，我们创建了一个名为 onlyNumber 的指令，它的限制条件是属性名（因此只能作为元素的属性来使用），指令作用的 DOM 元素只能输入数字。在该指令的链接函数中，我们绑定了一个 keypress 事件，当用户输入一个字符时，如果这个字符不是数字，就会被阻止。

内置指令

AngularJS 内置了很多指令，这些指令都以 ng- 前缀命名。

ng-repeat

ng-repeat 指令可以将一个数组中的每一项都渲染成一个 HTML 元素，形成一个列表。

htmlCopy Code
<ul>
  <li ng-repeat="item in items">{{item}}</li>
</ul>

上面的代码中，我们使用了 ng-repeat 指令，将 items 数组中的每一项都渲染成一个列表项。其中，item 是一个临时变量，用于存储数组中的当前项。

ng-model

ng-model 指令可以建立一个双向数据绑定，将表单元素中的值与控制器中的变量双向绑定起来。

htmlCopy Code
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>

上面的代码中，我们使用了 ng-model 指令来建立一个双向数据绑定，当用户在文本框中输入内容时，对应的 name 变量也会发生变化，同时显示的文本也会随之更新。

总结

AngularJS 指令是 AngularJS 中最常用的概念之一，它们可以扩展 HTML 元素和属性的行为和功能，让我们可以更加灵活地编写应用程序。无论是自定义指令还是内置指令，都具有很强的可扩展性和灵活性，可以让我们轻松实现各种功能。