随笔- 10 文章- 0 评论- 1 阅读- 36554

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) 0.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 函数。如果采用兼容模式，会降低 30% 的性能。

//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 3</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="&#10;" ng-trim="false"></textarea>


//form 中有输入不不符合规范的时候
<code>{{form.input.$valid}}为false

//ngModel 适用的标签
For basic examples, how to use ngModel, see:

input
text
checkbox
radio
number
email
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:1000,blur:0}}"
//上面的例子中，时间间隔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/