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 ...
随机推荐
- spring boot / cloud (五) 自签SSL证书以及HTTPS
spring boot / cloud (五) 自签SSL证书以及HTTPS 前言 什么是HTTPS? HTTPS(全称:Hyper Text Transfer Protocol over Secur ...
- 常用路径 URL 中的斜杠与反斜杠
常用路径中的斜杠与反斜杠... ------------------------------ 斜杠:反斜杠:======================电脑能识别的斜杠有两种:斜杠分正斜杠(forwa ...
- Java数组笔记
# 数组--------内存 # 2017/8/31 15:29:19 ## 数组(容器) ## - 为了存储同种数据类型的多个值 - 概念 - 数组是可以存储同一种数据类型多个元素的集合, ...
- 从yum提示空间不足到根分区扩容
记录一次安装软件的报错 --1261065212@qq.com 1.系统版本(VMware 虚拟机) [root@ansible-admin ~]# cat /etc/redhat-r ...
- MySQL插入、更新、删除数据
1.插入数据:由于下表的id会自增,故赋值null. 注意:字符串用' '单引号,不能双引号,英文状态下. 可以写上部分属性名进行插入操作,如bookTypeId没写,默认NULL. 也可以写上所 ...
- 求最长公共前缀和后缀—基于KMP的next数组
KMP算法最主要的就是计算next[]算法,但是我们知道next[]求的是当前字符串之前的子字符串的最大前后缀数,但是有的时候我们需要比较字符串中前后缀最大数,比如 LeetCode的shortest ...
- JavaPOI处理Excel
java处理excel,心得分享如下,如有不妥或者需要补充的地方,敬请指出,欢迎随时交流 1.加载excel,获得workbook对象 fileTemp = new File(pathOfMExce ...
- Ext.grid.EditorGridPanel分页和查看全部
在gridPanel添加查看全部数据按钮,必须使得每页显示的数量pageSize为总条数,那么总页数就只会有一页. 1.获取store数据的总条数 var totalCount = grid.getS ...
- 播放视频 IOS 与安卓的不同
安卓:video IOS:canvas 具体原因请见上传文件“宝马视频安卓与IOS的区别”
- 一步步带你做vue后台管理框架(二)——上手使用
系列教程<一步步带你做vue后台管理框架>第二课 github地址:vue-framework-wz 线上体验地址:立即体验 闲扯再多不会用也没白搭,这节课我来带大家直接上手框架,体验到简 ...