Skip to main content
 首页 » 编程设计

AngularJS 指令

2022年07月19日28myhome

1.  AngularJS指令的特点:

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

2.  下面介绍下常见的AngularJS指令:

  • ng-app指令:定义了AngularJS 应用程序的根元素。在网页加载完毕时会自动引导(自动初始化)应用程序。
  • ng-init指令:为 AngularJS 应用程序定义了初始值。通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
  • ng-model指令:绑定HTML元素到应用程序数据。也可以为应用程序数据提供类型验证(number、email、required)、为应用程序数据提供状态(invalid、dirty、touched、error)、为 HTML 元素提供 CSS 类、绑定 HTML 元素到 HTML 表单。
  • ng-repeat指令:对于集合中(数组中)的每个项会克隆一次HTML元素。
    <!DOCTYPE html> 
    <html> 
     
        <head> 
            <meta charset="UTF-8"> 
            <title></title> 
            <script type="text/javascript" src="js/angular.min.js"></script> 
        </head> 
     
        <body ng-app=""> 
            <div ng-init="quantity=1;price=5"></div> 
            <h2>价格计算器</h2> 
            数量: <input type="number" ng-model="quantity"> 
            价格: <input type="number" ng-model="price"> 
     
            <p><b>总价:</b> {{quantity * price}}</p> 
             
            <div ng-init="students=[ 
                {name:'小明',class:'一年级一班'}, 
                {name:'小红',class:'一年级二班'}, 
                {name:'小方',class:'一年级三班'} 
            ]"> 
                <p>循环对象</p> 
                <ul> 
                    <li ng-repeat="x in students"> 
                        {{x.name+" "+x.class}} 
                    </li> 
                </ul> 
            </div> 
        </body> 
    </html>

3.  创建自定义的指令:

  • 除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
  • 我们可以使用  .directive  函数来添加自定义的指令。
  • 要调用自定义指令,HTML 元素上需要添加自定义指令名。
  • 使用驼峰法来命名一个指令,myDirective,但是在使用的时候要用-分割开,my-directive。
  • 使用自定义指令有四种方式,可以通过restrict属性来限制使用,E 作为元素名使用、C 作为类名使用、A 作为属性使用、M 作为注释使用。
    • 通过元素名:
      <my-directive></my-directive>
    • 通过类名:必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
      <div class="my-directive"></div>
    • 通过属性:
      <div my-directive></div>
    • 通过注释:我们需要在该实例添加 replace 属性, 否则是不可见的。
      <!-- directive: my-directive -->
  • 案例展示:这里是通过元素名的方式来使用自定义指令,别的方式大家可以自行尝试。
    <!DOCTYPE html> 
    <html> 
     
        <head> 
            <meta charset="UTF-8"> 
            <title></title> 
            <script type="text/javascript" src="js/angular.min.js"></script> 
        </head> 
     
        <body ng-app="myApp"> 
            <my-directive></my-directive> 
             
            <script> 
            var app = angular.module("myApp", []); 
            app.directive("myDirective", function() { 
                return { 
                    template: "<h1>这是我的自定义指令!</h1>" 
                }; 
            }); 
        </script> 
        </body> 
    </html>

     


本文参考链接:https://www.cnblogs.com/wgl1995/p/6256269.html