欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

原创最新推荐文章于 2021-01-07 23:01:28 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析AngularJS指令，包括ng-app、ng-init、ng-model、ng-repeat等核心指令的用法及实例展示。

AngularJS 指令

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

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

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

ng-model 指令把应用程序数据绑定到 HTML 元素。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'">  
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你输入的为： {{ firstName }}</p> 
</div>
在输入框中尝试输入：
姓名：test
你输入的为：test

数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

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

ng-app 指令

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

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

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

ng-init 指令

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

通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

稍后您将学习更多有关控制器和模块的知识。

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

AngularJS 控制器

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

控制器的 $scope 是控制器所指向的应用程序 HTML 元素。

#AngularJS 实例

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="personController">

用户名: <input type="text" ng-model="person.Name"><br>
密码: <input type="text" ng-model="person.password"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        Name: "John",
        password: "123456"
    };
}
</script>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>

实例讲解：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller 指令把控制器命名为 object。

函数 personController 是一个标准的 JavaScript 对象的构造函数。

控制器对象有一个属性：$scope.person。

person 对象有两个属性：firstName 和 lastName。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

AngularJS HTML 事件

ng-click 指令

ng-click 指令定义了一个 AngularJS 单击事件。

隐藏 HTML 元素

ng-hide 指令用于设置应用的一部分 不可见 。

ng-hide="true" 让 HTML 元素 不可见。

ng-hide="false" 让元素可见。

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分可见 。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。