上一节:
下一节:

  AngularJS 指令

  • 定义和描述

    AngularJS 指令是带有前缀ng-的扩展HTML属性。
    AngularJS 具有一组内置指令，这些指令为您的应用程序提供功能。
    AngularJS 还允许您定义自己的指令。
    ng-app 指令会初始化AngularJS应用程序。
    ng-init 指令初始化应用程序数据。
    ng-model 指令将HTML控件的值（input, select, textarea）绑定到应用程序数据。 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="firstName='John'">
             <p>Name: <input type="text" ng-model="firstName"></p>
             <p>你写了: {{ firstName }}</p> 
       </div> 
       
    </body>
    </html>
    尝试一下
    ng-app 指令还告诉AngularJS <div> 元素是AngularJS应用程序的“所有者”。

  • 数据绑定

    所述的 {{ firstName }} 表达，在上述的例子中，是一个AngularJS数据绑定表达式。
    {{ firstName }} 与 {{ ng-model = "firstName" }} 绑定。
    在下一个示例中，两个文本字段与两个ng-model指令绑定在一起： 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="quantity=1;price=5">
          <p>数量: <input type="number" ng-model="quantity"></p>
          <p>价格: <input type="number" ng-model="price"></p>
          <p>总计:  {{ quantity * price }} </p>
        </div> 
    </body>
    </html>
    尝试一下
    使用 ng-init 并不是很常见。 在关于控制器的章节中，您将学到更好的初始化数据的方法。

  • 重复HTML元素

    ng-repeat 指令重复一个HTML元素： 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
            <ul>
                <li ng-repeat="x in names">
                    {{ x }}
                </li>
            </ul>
        </div> 
    </body>
    </html>
    尝试一下
    ng-repeat 指令实际上为集合中的每个项目克隆一次HTML元素。
    用于对象数组的 ng-repeat 指令： 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="names=[
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}]">
            <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-app 指令将HTML控件的值（input, select, textarea）绑定到应用程序数据。
    ng-model 指令还可以：
    • 提供应用程序数据（number、email、required）的类型验证。
    • 提供应用程序数据的状态（invalid, dirty, touched, error）。
    • 提供HTML元素的CSS类。
    • 将HTML元素绑定到HTML表单。
    在下一章中阅读有关ng-model指令的更多信息。

  • 创建新指令

    将一个控制器添加到您的应用程序，并使用 ng-controller 指令引用该控制器：
    除了所有内置的 AngularJS 指令之外，您还可以创建自己的指令。
    新指令是使用 .directive 函数创建的。
    要调用新指令，请使HTML元素具有与新指令相同的标记名。
    在命名指令时，必须使用驼峰式案例名称 jc2182Directive，但是在调用该指令时，必须使用-分隔名称，jc2182-directive： 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp">
             <jc2182-directive></jc2182-directive>
        </div> 
        <script>
            var app = angular.module("myApp", []);
            app.directive("jc2182Directive", function() {
                return {
                    template : "我是在指令构造函数中创建的！"
                };
            });
        </script>
    </body>
    </html>
    尝试一下
    您可以使用以下命令来调用指令：
    • 元素名称
    • 属性
    • 类
    • 注释
    下面的示例将产生相同的结果：
    元素名称 
    <jc2182-directive></jc2182-directive>
    尝试一下
    属性 
    <div jc2182-directive></div>
    尝试一下
    类 
    <div class="jc2182-directive"></div>
    尝试一下
    注释 
      <!-- directive: jc2182-directive -->
    尝试一下

  • 限制条件

    您可以限制指令仅由某些方法调用。
    通过添加值为 "A" 的restrict属性，该指令只能由属性调用： 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>菜鸟教程(cainiaoya.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp">
            <jc2182-directive></jc2182-directive>
            <div jc2182-directive></div>
        </div> 
        <script>
            var app = angular.module("myApp", []);
            app.directive("jc2182Directive", function() {
                return {
                    restrict : "A",
                    template : "<h1>由指令制成！</h1>"
                };
            });
        </script>
    </body>
    </html>
    尝试一下
    限制值为：
    • E 为元素名称
    • A 为属性
    • C 为类名称
    • M 为注释
    默认情况下，该值为EA，这意味着元素名称和属性名称均可调用该指令。
    有关完整的AngularJS指令参考，请访问我们的AngularJS参考手册。
上一节:
下一节: