angular学习笔记02 angular指令大全
第一步 先要引入angular,
第二步 在 html 标签中<html ng-app> 加入ng-app（这是个必须的，不然会报错）
接下来就可以去使用angular的各种指令了。
//js文件 js语法需要注意
在网上的写法有很多，最好是按标准的写法来写，不然js代码经过压缩就不能使用了（很重要）
压缩代码会出错，不压缩的话还是能运行的,原因是压缩代码会把关键字替换，因此 angular 在定义的时候需要这样。
angular.module('antsins.controllers')
.controller('GoodsCtrl',
['$scope', function($scope){
//这里就能写angular代码了
$scope.name ='tom'
}]
下面就直接上指令
//数据和model的绑定
<input type="text" ng-model="yourname" placeholder="World">
///html5表单验证属性与angular配合，要是form里有验证规则没有通过
//则$valid为false <input type="text" name="cheshi" ng-model="myName" required/>
<p ng-bind="myForm.cheshi.$valid"></p>
//复选框，checkboxModel.value1 选中为true,没选中为false
<input type="checkbox" ng-model="checkboxModel.value1">
//直接使用ng-bind-html报错
<p ng-bind-html="myHTML"></p>
解决方法,需要将html代码标记为信任，如下
.controller('FormController', ['$scope','$sce', function($scope,$sce) {
$scope.myHTML =$sce.trustAsHtml(
'I am an <code>HTML</code>string with ' +
'<a href="#">links!</a> and other <em>stuff</em>');
}]) //<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
//直接使用ngChange报错
<input type="text" ng-change="onChange() "/>
解决方法：必须加上：ng-model="age"
<input type="text" ng-model="age" ng-change="onChange() "/>
//ng-class 给一个元素增加class ,可以是一个对象，要、拥有几个class,也可以只有一个
<div ng-class="{className:true,otherName:bol}"></div>
//只有一个class
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style"
placeholder="Type: bold strike red" aria-label="Type: bold strike red">
<hr> //也可以是以个数组，数组中分别不同的值
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1"
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br>
<input ng-model="style2"
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br>
<input ng-model="style3"
placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br>
<hr> //还可以是数组和对象的混搭
<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
<input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>
//利用ng-class 实现简单的动画
.base-class {
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
} .base-class.my-class {
color: red;
font-size:3em;
}
//ng-click="myVar='my-class'" 只要一点击就给myVar赋值
<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<br>
<span class="base-class" ng-class="myVar">Sample Text</span>
//ngClassEven 和 ngClassOdd 指令的使用 奇数就使用odd,偶数就使用even
//常于ng-repeat配合使用
//ng-init 数据初始化，相当于var,给一个变量赋值
<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<li ng-repeat="name in names">
<span ng-class-odd="'odd'" ng-class-even="'even'">
{{name}}
</span>
</li>
</ol>
//ngClick 点击事件
//ngCloak 使用后没有{{}} 闪屏的情况,相当于ng-bind
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" class="ng-cloak">{{ 'world' }}</div>
//ngCopy 输入框中的文字被复制的时候会触发的事件
//ngCut 输入框中的文字被剪切的时候就会触发的事件
asdfasdfasd
<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
copied: {{copied}}
<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
cut: {{cut}}
//ng-csp
修改 AngularJS 中关于 "eval" 的行为方式及内联样式：
ng-csp 指令用于修改 AngularJS 的安全策略。
如果使用了 ng-csp 指令， AngularJS 将不会执行eval 函数，这样就无法注入内联样式。
设置 ng-csp 指令为 no-unsafe-eval, 将阻止 AngularJS 执行 eval 函数，但允许注入内联样式。
设置 ng-csp 指令为 no-inline-style, 将阻止 AngularJS 注入内联样式，但允许 执行 eval 函数。
如果开发 Google Chrome 扩展或 Windows 应用 ng-csp 指令是必须的。
注意:ng-csp 指令不会影响 JavaScript,但会修改 AngularJS 的工作方式，这就意味着: 你仍然可以编写 eval 函数,
且也可以正常执行, 但是 AngularJS 不能执行它自己的 eval 函数。如果采用兼容模式，会降低 % 的性能。
//ngDblclick 双击会触发的事件
//ngDisabled 禁用指令：值为true的时候禁用button
<label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<button ng-model="button" ng-disabled="checked">Button</button>
//ng-Focus 失去焦点时触发的事件
//ngHref,直接用href 就不能使用angular语法
<a id="link-3" ng-href="/{{'123'}}">link </a>
/ngIf 为true，则span显示
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
//ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
//ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。
//如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，
//否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最//本//质/的区别是，
//它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。
//ng-keydowm 返回的按键的字符值
//ngkeypress 返回的ASSCII字符
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>
event.altKey
功能：检测事件发生时Alt键是否被按住了。
语法：event.altKey
取值：true | false
说明：
altKey属性为true表示事件发生时Alt键被按下并保持，为false则Alt键没有按下。
altKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。
event.ctrlKey
功能：检测事件发生时Ctrl键是否被按住了。
语法：event.ctrlKey
取值：true | false
说明：
ctrlKey属性为true表示事件发生时Ctrl键被按下并保持，为false则Ctrl键没有按下。
ctrlKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。
event.shiftKey
功能：检测事件发生时Shift键是否被按住了。
语法：event.shiftKey
取值：true | false
说明：
shiftKey属性为true表示事件发生时Shift键被按下并保持，为false则Shift键没有按下。
shiftKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。
//ngList 输入的转为数组，输入逗号会分隔
<input name="namesInput" ng-model="names" ng-list required></label>
//ngList 输入的转为数组，输入换行会分隔
<textarea ng-model="list" ng-list=" " ng-trim="false"></textarea> //form 中有输入不不符合规范的时候
<code>{{form.input.$valid}}为false
//ngModel 适用的标签
For basic examples, how to use ngModel, see: input
text
checkbox
radio
number
url
date
datetime-local
time
month
week
select
textarea
ng-valid: the model is valid //有效的输入
ng-invalid: the model is invalid //无效的输入
ng-valid-[key]: for each valid key added by $setValidity
ng-invalid-[key]: for each invalid key added by $setValidity
ng-pristine: the control hasn't been interacted with yet
ng-dirty: the control has been interacted with
ng-touched: the control has been blurred
ng-untouched: the control hasn't been blurred
ng-pending: any $asyncValidators are unfulfilled
ng-empty: the view does not contain a value or the value is deemed "empty", as defined by the ngModel.NgModelController method
ng-not-empty: the view contains a non-empty value
//ngModelOptions 数据模型的选项配置
<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ updateOn: 'blur' }"
/>
//上面这个例子中只有失去焦点的时候才会根新数据
ng-model-options="{ updateOn: 'default blur' }"
//上面的例子中，输入会更新model,失去焦点也会更新model(感觉这个没太必要)
debounce:{default:,blur:}}"
//上面的例子中，时间间隔1秒没有输入没更新model，失去焦点会立即更新model ng-model-options="{ debounce: 1000 }"
//上面这个例子中，如果时间间隔1s内没 有继续输入就会更新数据
//ngMouseDown 鼠标点击
//ngMouseuo 鼠标松开事件 //ng-non-bindable 指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。
//在这个标签内的指令不会被执行
<div ng-non-bindable>Ignored: {{1 + 2}}</div>
//隐藏的元素会被展开
<details id="details" ng-open="open">
<summary>Show/Hide me</summary>
</details>
//<select ng-model="myColor" ng-options="color.name for color in colors">
控制器中数据
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
]
//<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
select中数据会有嵌套 //根据color.notAnOption 的boolear值去判断这个选项是不是禁用了
<select ng-model="myColor"
ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
</select> //ngPaste 粘贴数据进去的时候会触发的事件
//ng-pattern="regex" 正则判断
$scope.regex = '\\d+';
<input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" /><br>
//ngPluralize 隐藏属性？（查不到资料
//为true是，输入框是只读的
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />
/ng-src 写法
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" /> //ng-style 写法
<span ng-style='{"color":"blue"}'>Sample Text</span> //ng-submit 表单提交触发的事件 //ng-switch 内容的切换 //ng-value
//script
用来写模块
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script> <a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include src="currentTpl"></div>
nagular指令大概就是这些了，大部分是从官网取来的https://docs.angularjs.org/
angular学习笔记02 angular指令大全的更多相关文章
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(1)-概述
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...
- Angular学习笔记：Angular CLI
定义 Angular CLI:The Angular CLI is a command line interface tool that can create a project, add files ...
- angular学习笔记(三十)-指令(7)-compile和link(3)
本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序: 把上一个例子的代码再进行一些修改: 1.将level-two指令改成具有templa ...
随机推荐
- IDE UltraEdit 图文激活+安装教程
IDE UltraEdit 安装+激活图文.. ---------------- ---------------- ---------------- ---------------- -------- ...
- python_控制台输出带颜色的文字方法
在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中.而一般的应用服务器,第三方库,甚至服务器的一些通告也会在终端中显示,这样就搅乱了我们想要的信 ...
- Connector
增加project bar窗口,在编辑大规模工程电路时,方便管理电路的各个层次,在分页编辑大规模工程电路时,可以用place中的off-page connector 进行每一页的联接.
- maven 搭新建成之后 无法创建 src/main/java 目录解决
maven项目创建后 创建 src/main/java 和 src/main/test 会报错,目录已存在 打开build path 界面 src/main/java 和 ...
- Celery基本原理探讨
本文对Celery进行了研究,由于其实现相对比较复杂没有足够的时间和精力对各方各面的源码进行分析,因此本文根据Celery的使用方法以及实际行为分析其运行原理,并根据查阅相关代码进行了一定程度的验证. ...
- cacti监控系统
cacti 1. cacti安装 IP: 172.25.44.1 环境: Red Hat 6.5 镜像: rhel-server-6.5-x86_64-dvd.iso 火墙: /etc/init.d/ ...
- CentOS7.3虚拟机扩展数据磁盘
操作之前需要重点查看: 由于扩容磁盘的操作非同小可,一旦哪一步出现问题,就会导致分区损坏,数据丢失等一系列严重的问题,因此建议:在进行虚拟机分区扩容之前,一定要备份重要数据文件,并且先在测试机上验证以 ...
- 《Java从入门到放弃》JavaSE入门篇：面向对象语法二(入门版)
想了半天,发现单独的封装和多态没什么好讲的,我们就简单说说Java里面对应的语法吧. 相关内容如下: 一.访问修饰符 二.getter/setter方法 三.构造方法 四.super和this 五.s ...
- 第1阶段——uboot分析之仿照bootm制作hello命令(7)
仿照bootm命令生成来制作一个hello命令,功能:打印出hello,world!和参数值 1.点击New File ,创建cmd_hello.c将./common/cmd_bootm.c的头文件复 ...
- webStrom2017.1版本如何添加vue.js插件
第一步:打开webStrom-setting 第二步:选择File and Code Templates--点击左上角"+"号 第三步:在Name:vue File Exte ...