zoukankan      html  css  js  c++  java
  • angular指令

    AngularJS通过使用指令来扩展HTML、为应用程序添加新的功能;允许用户自定义新的指令。

    AngularJS是扩展了HTML属性,使用格式如下ng-**。

    AngularJS的指令有ng-app、ng-init、ng-model等,在接下来会一一解释。

    数据绑定:ng-model和{{}}

    “”{{}}“”是AngularJS数据绑定的表达式,数据绑定同步了AngularJS表达式和AngularJS数据;如下例子:

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

    <h2>the sum is:</h2>

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

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

    <p>sum:</b>{{quantity*price}}</p>

    </div>

    重复HTML元素:ng-repeat

    ng-repeat指令会重复一个html元素。使用方法如下:

    <div ng=app="" ng-init="countries=[‘china’,'USA','JAP']">

    <ul>

    <li ng-repeat="c in countries">

    {{c}}

    </li>

    </ul>

    </div>

    ng-repeat与foreach循环的用法类似。

    应用程序根指令:ng-app

    ng-app指令定义了应用程序的根元素,该指令会在网页加载完毕后自动引导(自动初始化)应用程序。

    应用程序初始值指令:ng-init

    ng-init为应用程序定义了初始值,但是在一般情况下,我们不推荐使用ng-init,而是使用控制器或者模板来替换。

    数据绑定指令:ng-model

    绑定HTML元素到应用程序数据。ng-model可以提供类型验证、为应用程序数据提供状态、为html元素提供css类、绑定html元素到HTML表单。

    ng-disabled指令:该指令直接绑定到应用程序数据到html的disabled属性。

    ng-show指令:根据value的值来显示或者隐藏html元素。

    ng-hide指令:用于隐藏或者显示html元素。

    自定义指令

    我们可以使用.direct函数来添加自定义的指令。

    注意:在定义的时候是用骆驼发来命名一个指令,茹ngRun,但是在使用的时候需要用“-”分割开来:ng-Run。如下例子:

    <div ng-app="app">

    <ng-Run></ng-Run>//元素名称调用

    <div ng-Run></div>//属性调用方式

    <div class="ng-Run"></div>//类名调用方式

    <script>

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

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

    return{

    template:"<p>this is a sample<p>"

    };

    });

    </script>

    </div>

    通过使用restrict来限制指令的调用方式,可以使用如下的几个限制:

    E:作为元素名使用。

    A:作为属性使用。

    C:作为类名使用。

    M:作为注释使用。

    restrict默认值是EA

  • 相关阅读:
    【疯狂积累CSS】1:CSS基础
    阿里云服务器配置小程序用ssl证书
    阿里云服务器申请ssl安全证书
    PDO连接SQLServer2008(linux和windows)
    win7 PHP7.0的PDO扩展
    Apache+php+mysql win7 64位安装的几个注意事项
    PHP配置xdebug
    PHPExcel导出
    【设计模式】命令模式
    【maven学习笔记】 01 初见
  • 原文地址:https://www.cnblogs.com/VARForrest/p/7761861.html
Copyright © 2011-2022 走看看