1.属性指令

  • angularjs样式相关指令:

    • ng-class
    • ng-style
    • ng-href
    • ng-src
    • ng-attr-(suffix)
  • ng-bind
  • ng-cloak  没解析完之前标签是隐藏的,解析完后标签是显示的,控制css的指令
  • ng-bind-template  支持多表达式'{{text}},{{text}}'
  • ng-bind-html  解析字符串中的标签,需要依赖angular-sanitize.min.js
  • ng-non-bindable  不解析表达式,就原样输出{{text}}
  • ng-show
  • ng-hide
  • ng-if 当表达式为true ,该标签显示。并不是通过css操作,而且dom的添加删除的操作。
  • ng-switch
    • on
    • default
    • when
<div ng-switch on="bBtn">
        <p ng-switch-default>默认的效果</p>
        <p ng-switch-when = "false">切换的效果</p>
</div>
  • ng-open  针对details标签,有兼容性,只支持chrome和Safari
<details ng-open="true">    //true显示下面列表,false不显示
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
</details>
  • ng-init   建议在循环嵌套中利用此指令定义初始循环变量
<div ng-controller = "Ctr" ng-init = "aIndex = $index ">
    {{aIndex}}
</div>
  • ng-include  引入模板
  • ng-model  扩展,可以对数据添加条件,比如光标离开时更新数据。
       <script type="application/javascript">
            var sStyle = angular.module("sStyle",[]);
            sStyle.controller("styleController",["$scope",function($scope){
                $scope.text = "hello";
            }])
       </script>
       <body>
         <div ng-controller = "styleController">
            <input type="input" ng-model="text" ng-model-options="{updateOn : 'blur'}"/>
            <div>{{text}}</div>
         </div>
       </body>
  • ng-controller

    • as  针对面向对象

2.标签指令,用于表单验证中

  • <a> 在ng-app中会阻止默认行为
  • <select>        <script type="application/javascript">            var sStyle = angular.module("sStyle",[]);

    <script type="application/javascript">
        var sStyle = angular.module("sStyle",[]);

         sStyle.controller("styleController",["$scope",function($scope){
                $scope.colors=[
                  { name : "red"},
                  { name : "yellow"},
                  { name : "blue"}
                ];
            }])
        </script>
        <body>
            <div ng-controller = "styleController">
          <a href ="">{{myColor.name}}</a> <select ng-options = "color.name for color in colors" ng-model = "myColor">
          </select>
</div> </body>
  • <textarea>
  • <input>
  • <form>
    • novalidate  阻止html5表单自带的样式,比如没有按照type="email"格式输入,鼠标点击其他位置,此时边框会默认变红色。

3.表单验证

  • $valid     表单验证成功返回true,验证失败返回false
  • $invalid  相反
  • $pristine 表单验证的值未修改返回true,修改过返回false
  • $dirty     相反
  • $error    验证失败

支持表单验证

  • type

    • email
    • number
    • url
  • required

秒味课堂Angular js笔记------指令的更多相关文章

  1. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  2. 秒味课堂Angular js笔记------过滤器

    不同过滤器的小demo. currency number uppercase json limitTo date orderBy filter <script> var filterMy ...

  3. 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

    $scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达 ...

  4. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  5. Angular JS笔记

    1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...

  6. Angular JS 中 指令详解

    Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...

  7. Angular JS - 7 - Angular JS 常用指令2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. Angular JS - 6 - Angular JS 常用指令

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. angular js 自定义指令

    我们有些时候需要把后台返回过来的带有html标签的字符串binding到界面中一个指定的div或者其他的控制器中. 使用普通ng-bind不会自动解析出html语句. js中这样定义: app.dir ...

随机推荐

  1. 浅谈java性能分析

    浅谈java性能分析,效能分析 在老师强烈的要求下做了效能分析,对上次写过的词频统计的程序进行分析以及改进. 对于效能分析:我个人很浅显的认为就是程序的运行效率,代码的执行效率等等. java做性能测 ...

  2. visual studio粘贴html代码.会自行添加一些未知代码(自动格式化)

    比如我们要粘贴这样一段代码到VS这里 <option {if empty($param.is_active)}selected=selected{/if}>请选择</option&g ...

  3. eclipse中SVN分支合并到主干

    在项目开发中,需要添加一些新的功能,但是又不想影响到其他开发人员的项目进度,所以决定使用SVN分支进行开发,分支开发完毕后再合并到主干.本文介绍如何在eclipse中合并分支到主干. 1. 要想将分支 ...

  4. java解析xml文件四种方式

    1.介绍 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找 ...

  5. paip.java UrlRewrite 的原理and实现 htaccess正則表達式转换

    paip.java UrlRewrite 的原理and实现 htaccess正則表達式转换 #---KEYWORD #-正則表達式 正則表達式 表示 非指定字符串开头的正则 排除指定文件夹.. 作者 ...

  6. Spring boot 1: 使用IDEA创建Spring boot项目

    项目用到的环境: Windows 10 JDK8 IntelliJ IDEA 2017.1.3 Apache Tomcat 8 Maven 3.3.3 使用IDEA新建spring boot项目 新建 ...

  7. Colossus: Successor to the Google File System (GFS)

    Colossus is the successor to the Google File System (GFS) as mentioned in the recent paper on Spanne ...

  8. Java基础知识拾遗(二)

    Lambda表达式 lambda表达式本质上就是一个匿名方法.但是这个方法不是独立执行的,而是构成了一个函数式接口定义的抽象方法的实现,该函数式接口定义了它的目标类型. 只有在定义了lambda表达式 ...

  9. day 58 bootstrap -part1

    我们的bootstrap主要使用都是官网里面的内容,官网里面的都整理得很完备,有需要的时候就直接去里面找即可, 关于这个bootstrap,我所理解的就是,我们前面所学的那些,从html开始一直到后面 ...

  10. ArcGIS 10.3 AddIN编译旧版本项目问题

    ArcGIS 10.1的AddIN项目,后来ArcGIS版本升级为10.3 AddIN项目想做一些细节调整,结果出生成时没有生成esriaddin文件,ArcMap中AddIn Manager中也没有 ...