Angular JS1学习笔记之一指令

最新推荐文章于 2021-10-21 11:17:34 发布

原创最新推荐文章于 2021-10-21 11:17:34 发布 · 928 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular #html #扩展 #应用 #指令

Angular 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了AngularJS中的核心概念——指令，包括内置指令如ng-app、ng-init、ng-model、ng-repeat等的功能及用法，并详细讲解了如何创建自定义指令。

AngularJS 指令

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

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。

各指令简介

1. ng-app 指令

ng-app 指令初始化一个 AngularJS 应用程序，定义了 AngularJS 应用程序的 根元素。

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

2. ng-init 指令

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

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

3.ng-model 指令

ng-model 指令把元素值（比如输入域的值）绑定到应用程序；绑定 HTML 元素到应用程序数据。

ng-model指令也可以：

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

4. ng-repeat 指令

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

5. 创建自定义指令

实例：

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

页面上开始输入框内有初始值为John，你也可以自己输入值，通过ng-model指令绑定到页面视图上。

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

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

1. 数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model=”firstName” 进行同步。

一个应用程序也可包含多个ng-model指令，如计算器的小应用：

<div ng-app="" ng-init="quality=5;price=2">
   <h2>价格计算器：</h2>
   <p>单价：<input type="number" ng-model="price"></input></p>
   <p>数量：<input type="number" ng-model="quality"></input></p>
   <p>总价为：{{quality*price}}</p>
</div>

2.重复HTML元素

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

<div data-ng-app="" data-ng-init="names=['Sofia','Vantis','jonas','shasha']">
   <p>使用 ng-repeat 来循环数组</p>
    <ul>
      <li data-ng-repeat="x in names">
        {{x}}
      </li>
    </ul>
</div>

程序将会遍历names数组，依次输出其内容：这里写图片描述

2.2 ng-repeat 指令用在一个对象数组上，如：

<div data-ng-app="" data-ng-init="names=[
        {name:'vantis',tel:'111'},
        {name:'Sofia',tel:'10124'},
        {name:'jonas',tel:'447875'}
    ]">
    <p>使用 ng-repeat 来循环对象数组</p>
      <ul>
        <li data-ng-repeat="x in names">
            {{'姓名：'+x.name+'&nbsp;'+'Tel：'+x.tel}}
        </li>
       </ul>
</div>

依次输出对象数组中的内容这里写图片描述

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以使用 .directive 函数来创建自定义指令。

要调用自定义指令，HTMl 元素上需要添加自定义指令名，如下的<runoob-directive></runoob-directive>。

使用驼峰法来命名一个指令如： runoobDirective ,但在使用它时需要以 - 分割, runoob-directive:

对以下示例：

<div ng-app="myApp">
    <runoob-directive></runoob-directive>//调用

    <script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            template : "<h1>自定义指令!</h1>"
        };
    });
    </script>

</div>

程序将会输出tempalte里规定的样式内容。

这里我们定义了自己的指令runoobDirective，在声明时，我们使用驼峰命名。注意：在调用时，我们用元素名的方式调用该指令，此时指令名以-分隔。

调用方式

调用指令除上述的元素名方式外，还可使用属性、类名和注释方式。

【元素名方式】

<runoob-directive></runoob-directive>

【属性方式】

直接在上述的代码处，将<runoob-directive></runoob-directive>替换成<div runoob-directive></div>即可。

<div runoob-directive></div>

【类名方式】

同样地，在上述代码处，相同位置替换即可。

<div class="runoob-directive"></div>

【注释方式】

注释方式请注意：return语句里加了两个必需属性

<div ng-app="myApp2">
    <!-- directive: runoob-directive -->
    <script>
    var app = angular.module("myApp2", []);
    app.directive("runoobDirective", function() {
        return {
            restrict: "M",
            replace: true,
            template: "<h1>自定义指令!</h1>"
        };
    });
    </script>
    <p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>
    <p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>
</div>