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. 
						
  2. 秒味课堂Angular js笔记------过滤器
		
    不同过滤器的小demo. currency number uppercase json limitTo date orderBy filter <script> var filterMy  ...
    
		
    3. 
						
  3. 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply
		
    $scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达 ...
    
		
    4. 
						
  4. Angular.js之指令学习笔记
		
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
    
		
    5. 
						
  5. Angular JS笔记
		
    1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...
    
		
    6. 
						
  6. Angular JS 中 指令详解
		
    Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...
    
		
    7. 
						
  7. Angular JS - 7 - Angular JS 常用指令2
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    8. 
						
  8. Angular JS - 6 - Angular JS 常用指令
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. angular js 自定义指令
		
    我们有些时候需要把后台返回过来的带有html标签的字符串binding到界面中一个指定的div或者其他的控制器中. 使用普通ng-bind不会自动解析出html语句. js中这样定义: app.dir ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Asp.net MVC 与 Asp.net Web API 区别
			
    Asp.Net Web API VS Asp.Net MVC 1.Asp.net MVC 是用来创建返回视图(Views)与数据的Web应用,而Asp.net Web API是一种简单轻松地成熟的HT ...
    
			
    2. 
						
  2. php中抽象类和接口的特点、区别和选择
			
    一.特点: 1.抽象类特点 (1) 用 abstract 来修饰一个类,那么这个类就是抽象类:抽象类绝对不能被实例化,即$abc = new 抽象类名();会报错. (2) 用abstract 来修饰 ...
    
			
    3. 
						
  3. 实验七：Linux内核如何装载和启动一个可执行程序
			
    原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 题目自拟,内容围绕对Linu ...
    
			
    4. 
						
  4. 基于OSGi的企业级快速开发平台(开源)
			
    模块化.插件化是未来的主流趋势,他很好的解决了,公司知识的积累.应用分发.商务模式.快速构建等一系列问题,国外著名的插件化平台JIRA就非常成功,国内的目前很多公司在偿试插件化的开发模式,作为平台推出 ...
    
			
    5. 
						
  5. python3.4.2 安装Pillow
			
    Python 3.x 安装Pillow给Python安装Pillow非常简单,使用pip或easy_install只要一行代码即可.在命令行使用PIP安装: pip install Pillow或在命 ...
    
			
    6. 
						
  6. 畅谈Spring设计哲学
			
    自己从学习编程开始到现在有一个习惯:一直喜欢把软件开发中的技术和思路放到实际生活中去类比考虑.自己平常也喜欢开一些关于软件哲学的书籍,事实证明这些书籍对自己的学习新技术很有很大的帮助.数学是一切学科的 ...
    
			
    7. 
						
  7. 启动weblogic11g一直提示<141281> <unable to get file lock, will retry ...>
			
    一次非正常关闭weblogic之后,再次启动时启动不成功,一直提示:<141281> <unable to get file lock, will retry ...> 解决方 ...
    
			
    8. 
						
  8. lua学习笔记之-语言基础
			
    一.基本知识 1.第一个程序: print("hello lua"); 在交互模式下直接运行: > print("hello lua") hello lu ...
    
			
    9. 
						
  9. java中利用RandomAccessFile读取超大文件
			
    超大文件我们使用普通的文件读取方式都很慢很卡,在java中为我提供了RandomAccessFile函数,可以快速的读取超大文件并且不会感觉到卡哦,下面看我的一个演示实例. 服务器的日志文件往往达到4 ...
    
			
    10. 
						
  10. java浮点类型计算
			
    java浮点类型需要采用java.math.*这个工具包,这样的计算结果才是我们想要的.呵呵 import java.math.BigDecimal; import java.text.NumberF ...
    
			
    11.