• Angular JS学习之指令


    1.Angular JS通过称为指令的新属性来扩展HTML;通过内置的指令来为应用添加功能;

    2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-;

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

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

    **ng-model:指令把元素(比如输入域的值)绑定到应用程序;

    <div ng-app="" ng-init="firstName='John'">

      <p>在输入框尝试输入:</p>

      <p>姓名:<input type="text" ng-model="firstName"></p>

      <p>你输入的为:{{firstName}}</p>

    </div>

    3.ng-app指令告诉AngularJS,<div>元素是Angular应用程序的“所有者”,一个网页可以包含多个运行在不同元素的Angular应用程序;

    4.数据绑定:{{firstname}}表达式是一个AngularsJS数据绑定表达式;

    AngularJS中的数据绑定,同步了AngularJS表达式与AngularJS数据;

    {{firstname}}是通过ng-model="firstname"进行同步;

    例:

    <div ng-app="" ng-init="quantity=1price=5;">

    <h2>价格计算器</h2>

    数量:<input type="number" ng-model="quantity">

    价格:<input type="number" ng-model="price">

    <p><b>总价:</b>{{quantity*price}}</p>

    </div>

    5.重复HTML元素:ng-repeat指令会重复一个HTML元素

    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">

      <p>使用 ng-repeat来循环数组</p>

      <ul>

        <li ng-repeat="x in names">{{x}}</li>

      </ul>

    </div>

    6.ng-app指令:定义了AngularJS应用程序的根元素,在网页加载完毕时会自动引导(自动初始化)应用程序;

    7.ng-init指令:为AngularJS应用程序定义了初始值;通常情况下,不使用ng-init,使用一个控制器或模块来代替它;

    8.ng-model指令:绑定HTML元素到应用程序数据;

    **为应用程序提供类型验证(number,email,required)

    **为应用程序数据提供状态(invalid,dirty,touched,error)

    **为HTML元素提供CSS类

    **绑定HTML元素到HTML表单

    9.ng-repeat指令:ng-repeat指令对于集合中(数组中)每一个项会克隆一次HTML元素

    10.创建自定义的指令:除了AngularJS内置的指令外,还可以创建自定义的指令;

    **可以使用.directive函数添加自定义的指令;

    **要调用自定义指令,HTML元素上需添加自定义指令名;

    <body ng-app="myApp">

    <runoob-directive></runoob-directive>

    <script>

    var app=angular.module("myApp",[]);

    app.directive("runoobDirective",function(){

      return{

        template:"<h1>自定义指令!</h1>"

      };

    });

    </script>

    </body>

    11.可以使用以下方式调用指令:

    (1)元素名:<runoob-directive></runoob-directive>

    (2)属性:<div runoob-directive></div>

    (3)类名:<div class="runoob-directive"></div>

    (4)注释:<!--指令:runoob-directive-->

    12.限制使用:限制你的指令只能通过特定的方式调用;

    var app=angular.module("myApp",[]);

    app.directive("runoobDirective",function(){

      return{

        restrict :"A",

        template :"<h1>自定义指令!</h1>"

      };

    });

    **restrict值可以是以下几种:默认为EA,即通过元素名和属性名来调用指令

    E作为元素名使用

    A作为属性使用

    C作为类名使用

    M作为注释使用

  • 相关阅读:
    255以内全一的二进制数
    XP下ubuntu双系统安装方法
    数据库的增删改查
    网安团队建设
    链表相关操作
    操作系统及其他----面试
    排序算法之----快速排序
    排序算法之----希尔排序
    排序算法之----选择排序&插入排序
    排序算法之----冒泡排序
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6045806.html
Copyright © 2020-2023  润新知