好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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"  /><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" >
  Content of the template.
</script>

<a ng-click="currentTpl='/tpl.html'" >Load inlined template</a>
<div ></div>

nagular指令大概就是这些了，大部分是从官网取来的 https://docs.angularjs.org/

查看更多关于angular学习笔记02 angular指令大全的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did222777
  阅读：34次

上一篇： angular2 select 联动

下一篇：angular js 指令 ng-model与 no-repeat的使用 ng-各种指令 创建自

相关资讯