AngularJS 指令

AngularJS 允许您使用名为 Directives 指令的新属性扩展 HTML。

AngularJS 有一组内置指令，为应用程序提供功能。

AngularJS 还允许您定义自己的指令。

AngularJS 指令

AngularJS 指令是带有 ng- 前缀的扩展 HTML 属性。

ng-app 指令初始化 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令将 HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。

有关完整参考，请访问本站的 AngularJS 指令参考。

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中输入内容:</p>
<p>名称: <input type="text" ng-model="firstName"></p>
<p>您输入: {{ firstName }}</p>
</div>
</body>
</html>

运行一下

ng-app 指令还告诉 AngularJS，<div> 元素是 AngularJS 应用程序的 "所有者"。

数据绑定

在上面的示例中，{{ firstName }} 表达式是 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定将 AngularJS 表达式与 AngularJS 数据绑定。

{{firstName}} 与 ng-model="firstName" 绑定。

在下一个示例中，两个文本字段用两个 ng-model 指令绑定在一起:

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=5">
<h2>费用计算</h2>
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p><b>美元总计:</b> {{quantity * price}}</p>
</div>
</body>
</html>

运行一下

使用 ng-init 并不常见。在关于控制器的章节中，您将学习如何初始化数据。

重复 HTML 元素

ng-repeat 指令重复一个 HTML 元素:

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 循环:</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
</body>
</html>

运行一下

ng-repeat 指令实际上为集合中的每个项目克隆 HTML 元素一次。

ng-repeat 用于对象数组的指令:

实例

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}</li>
</ul>
</div>
</body>
</html>

运行一下

AngularJS 非常适合数据库 CRUD（创建-读取-更新-删除）应用程序。

ng-app 指令

ng-app 指令定义 AngularJS 应用程序的 根元素。

ng-app 指令将在加载网页时 自动引导（自动初始化）应用程序。

ng-init 指令

ng-init 指令定义 AngularJS 应用程序的初始值。

通常，您将使用控制器或模块，而不是 ng-init。

稍后，您将了解更多有关控制器和模块的信息。

ng-model 指令

ng-model 指令将 HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。

ng-model 指令也能够:

提供应用程序数据的类型验证（数字、电子邮件、必填项）。
提供应用程序数据的状态（无效、脏、接触、错误）。
为 HTML 元素提供 CSS 类。
将 HTML 元素绑定到 HTML 表单。

在下一章中阅读更多关于 ng-model 指令的信息。

创建一个新指令

除了所有内置的 AngularJS 指令，您还可以创建自己的指令。

通过使用 .directive 功能创建新指令。

要调用新指令，请使用与新指令相同的标记名创建一个 HTML 元素。

在命名指令时，必须使用驼峰命名法，比如 TestDirective，但在调用它时，必须使用 - 分隔符 test-directive:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<test-directive></test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("TestDirective", function() {
    return {
        template : "<h2>由指令生成!</h2>"
    };
});
</script>
</body>
</html>

运行一下

可以使用以下命令调用指令：

元素名
属性
样式表名
注释

下面的例子都会产生相同的结果:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<test-directive></test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("TestDirective", function() {
    return {
        template : "<h2>由指令生成!</h2>"
    };
});
</script>
</body>
</html>

运行一下

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<div test-directive=""></div>
<script>
var app = angular.module("myApp", []);
app.directive("TestDirective", function() {
    return {
        template : "<h2>由指令生成!</h2>"
    };
});
</script>
</body>
</html>

运行一下

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<div class="test-directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("TestDirective", function() {
    return {
        restrict : "C",
        template : "<h2>由指令生成!</h2>"
    };
});
</script>
<p><strong>备注:</strong> 必须将值 "C" 添加到restrict属性，才能从类名调用指令。</p>
</body>
</html>

运行一下

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<!-- directive: test-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("TestDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h2>由指令生成!</h2>"
    };
});
</script>
<p><strong>备注:</strong> 在本例中，我们添加了 <strong>replace</strong> 属性，否则注释将不可见。</p>
<p><strong>备注:</strong> 必须将值 "M" 添加到<strong>restrict</strong>属性，才能从注释中调用指令。</p>
</body>
</html>

运行一下

限制

您可以将指令限制为仅由某些方法调用。

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<test-directive></test-directive>
<div test-directive=""></div>
<script>
var app = angular.module("myApp", []);
app.directive("TestDirective", function() {
    return {
        restrict : "A",
        template : "<h2>由指令生成!</h2>"
    };
});
</script>
<p><strong>备注:</strong> 通过将 <strong>restrict</strong> 属性设置为 "A"，只有具有 "TestDirective" 属性的 HTML 元素调用了该指令。</p>
</body>
</html>

运行一下

有效限制值有:

E 表示元素名称
A 表示属性
C 表示样式表名
M 表示注释

默认情况下，该值为 EA，这意味着元素名和属性名都可以调用该指令。

AngularJS 指令

AngularJS 指令

实例

数据绑定

实例

重复 HTML 元素

实例

实例

ng-app 指令

ng-init 指令

ng-model 指令

创建一个新指令

限制

分类导航