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参考手册